white-space：nowrap;并且flexbox无法在chrome中工作

Question

Chrome的最近更新使用text-overflow: ellipsis;在overflow: hidden元素上打破white-space: nowrap。如何解决，如果没有上name类中添加硬编码的宽度..

<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> 

结构不应该改变，因为我重用.name部分其他地方在我的应用程序。

.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

Answer 1

在柔性物品的初始设定为最小宽度工作：自动。因此，为了 每个项目留在容器内，我们需要给最小宽度：0

添加min-width: 0;。这是你的情况很容易解决。

是

name { 
    display: flex; 
    min-width: 0; 
} 

片段

.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>

Answer 2

文本溢出：省略号与宽度

.lastname { 
    width: 525px; 
    flex-grow: 1; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap; 
}