Die letzte Aktualisierung von Chrome unterbricht white-space: nowrap
mit text-overflow: Ellipsis;
für ein overflow: hidden
-Element. Wie kann das Problem behoben werden, ohne dass die name
-Klasse hartcodiert wird.
<h1>problem</h1>
<div class="container">
<div class="name">
<div class="firstname">
test
</div>
<div class="lastname">
as kjldashdk ja asdjhk ashdjk ashdjk asdjasdkajsdh akjsd asd asd asd asd asd asd as das da asdas dasd asda sdasd as dasd asd asd as dasd a
</div>
</div>
<div class="side">
options
</div>
</div>
Die Struktur sollte sich nicht ändern, da ich den .name
-Abschnitt an anderer Stelle in meiner App wiederverwende.
.container {
width: 800px;
height: 80px;
display: flex;
border: solid 1px black;
margin: 10px;
}
.name {
display: flex;
}
.firstname {
width: 100px;
background-color: grey;
}
.lastname {
flex-grow: 1;
text-overflow: Ellipsis;
overflow: hidden;
white-space: nowrap;
}
.side {
flex-grow: 0;
}
.side, .firstname, .lastname {
align-self: center;
padding: 0 20px;
}
Die Anfangseinstellung für Flex-Elemente ist
min-width: auto
. Also für Jedes Element, das innerhalb des Containers verbleibt, mussmin-width: 0
geben.
Fügen Sie min-width: 0;
hinzu. Dies ist die einfache Problemumgehung in Ihrem Fall.
das ist
name {
display: flex;
min-width: 0;
}
Snippet
.container {
width: 800px;
height: 80px;
display: flex;
border: solid 1px black;
margin: 10px;
}
.name {
display: flex;
min-width: 0;
}
.firstname {
width: 100px;
background-color: grey;
}
.lastname {
flex-grow: 1;
text-overflow: Ellipsis;
overflow: hidden;
white-space: nowrap;
display: flex;
}
.side {
flex-grow: 0;
}
.side, .firstname, .lastname {
align-self: center;
padding: 0 20px;
}
<h1>problem</h1>
<div class="container">
<div class="name">
<div class="firstname">
test
</div>
<div class="lastname">
as kjldashdk ja asdjhk ashdjk ashdjk asdjasdkajsdh akjsd asd asd asd asd asd asd as das da asdas dasd asda sdasd as dasd asd asd as dasd a
</div>
</div>
<div class="side">
options
</div>
</div>
<h1>expected result</h1>
<div class="container">
<div class="name">
<div class="firstname">
test
</div>
<div class="lastname">
as kjldashdk ja asdjhk ashdjk ashdjk asdjasdkajsdh akjsd asd asd asd asd sa dad...
</div>
</div>
<div class="side">
options
</div>
</div>
Andere Variante für text-overflow: Ellipsis
wenn der Inhalt width
dynamisch sein muss
html, body{
width: 100%;
padding: 0;
margin: 0;
}
body{
padding-top: 10px
}
.container{
display: flex;
justify-content: space-between;
align-items: stretch;
box-sizing: boder-box;
width: 100%;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid #ddd
}
.title{
display: flex;
flex: 0 0 auto;
justify-content: center;
align-items: center;
padding: 10px;
background-color: #ddd
}
.content{
display: flex;
flex-grow: 1;
align-items: center;
padding: 0 10px;
overflow: hidden
}
.wrapper{
width: 100%;
overflow: hidden;
text-overflow: Ellipsis
}
.area{
display: flex;
flex: 0 0 auto;
flex-grow: 0;
padding: 0 10px;
align-items: center;
background-color: #ddd
}
<div class="container">
<div class="title">
Title
</div>
<div class="content">
<div class="wrapper">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
<div class="area">
Options
</div>
</div>
<div class="container">
<div class="title">
Title
</div>
<div class="content">
<div class="wrapper"> Lorem_Ipsum_isssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
</div>
</div>
<div class="area">
Options
</div>
</div>
<div class="container">
<div class="title">
Title 1 | Title 2
</div>
<div class="content">
<div class="wrapper">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
<div class="area">
Options 1 | Options 2
</div>
</div>
<div class="container">
<div class="title">
Title 1 | Title 2
</div>
<div class="content">
<div class="wrapper"> Lorem_Ipsum_isssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
</div>
</div>
<div class="area">
Options 1 | Options 2
</div>
</div>
Beispiel: https://codepen.io/Norfild/pen/KozJzg
text-overflow: Ellipsis
arbeitet mit der width
-Eigenschaft
.lastname {
width: 525px;
flex-grow: 1;
text-overflow: Ellipsis;
overflow: hidden;
white-space: nowrap;
}