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