flex子项上的文本溢出省略号不起作用

Question

我有的容器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>

Answer 1

添加overflow: hidden;到.wrapper .child2。

其实，MOSH Feu的建议在他的回答，min- width: 0也应该工作，确实，跨浏览器，IE虽然是越野车和需要overflow

之所以也child2需要它，是因为它也是一个伸缩项目，在这种情况下min- width，伸缩项目的默认值为auto，并且不允许其小于其内容，因此可以添加overflow: hidden（或除以外的任何值visible），或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>