Ostatnia aktualizacja wyłączników Chrome white-space: nowrap
przy użyciu text-overflow: ellipsis;
na elemencie overflow: hidden
. Jak to naprawić bez dodawania zakodowane szerokość na name
klasy ..white-space: nowrap; i flexbox nie działał w chrome
<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>
struktura nie powinna ulec zmianie, bo ponowne sekcję .name
gdzieś w mojej aplikacji.
.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;
}
http://codepen.io/anon/pen/xZpMYg
Uważam za 'text-overflow: ellipsis' do pracy należy określić' width' (lub ' flex-basis'), jak również. Tego właśnie brakuje w klasie '.lastname'. –