我有一个容器flex。我希望中间的孩子占据整个空间，所以我设置了它flex: 1。到目前为止，一切都很好。
下一个级别是中间的孩子有 2 个孩子，所以我也想将其设置为 Flex （如果你迷失了我，只需跳到片段），第一个孩子我设置省略号样式。现在，省略号停止工作。
如果您单击该按钮，您将看到短文本的一切都很好；
有任何想法吗？
function toggle() {
var el = document.querySelector('.el');
el.textContent = el.textContent === 'short' ? 'long long long text' : 'short';
}
.wrapper {
display: flex;
width: 200px;
align-content: stretch;
padding: 5px;
min-width: 0;
border: 1px solid
}
.wrapper .child2 {
flex-grow: 1;
}
.flex {
display: flex;
min-width: 0;
}
.el {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.child1 {
background: red;
}
.child2 {
background: blue;
}
.child3 {
background: green;
}
.wrapper>* {
padding: 5px;
}
<div class="wrapper">
<div class="child1">child1</div>
<div class="child2">
<div class="flex">
<div class="el">long long long text</div>
<div>a</div>
</div>
</div>
<div class="child3">child3</div>
</div>
<button onclick="toggle()">Toggle ellipsis text</button>
Add overflow: hidden; to .wrapper .child2.
其实，作为Mosh Feu 在他的回答中建议 https://stackoverflow.com/a/45813583/2827823, min-width: 0应该也可以跨浏览器工作，而且确实如此，尽管 IE 有问题并且需要overflow
其原因还在于child2需要它，是因为它也是一个弹性项目，在本例中是弹性项目的min-width，默认为auto，并且不允许它小于其内容，因此通过添加overflow: hidden（或任何值，但visible), or min-width: 0，会让它。
function toggle() {
var el = document.querySelector('.el');
el.textContent = el.textContent === 'short' ? 'long long long text' : 'short';
}
.wrapper {
display: flex;
width: 200px;
align-content: stretch;
padding: 5px;
min-width: 0;
border: 1px solid
}
.wrapper .child2 {
flex-grow: 1;
overflow: hidden;
}
.flex {
display: flex;
min-width: 0;
}
.el {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.child1 {
background: red;
}
.child2 {
background: lightblue;
}
.child3 {
background: green;
}
.wrapper>* {
padding: 5px;
}
<div class="wrapper">
<div class="child1">child1</div>
<div class="child2">
<div class="flex">
<div class="el">long long long text</div>
<div>a</div>
</div>
</div>
<div class="child3">child3</div>
</div>
<button onclick="toggle()">Toggle ellipsis text</button>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
