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

Question

我有容器flex.我希望中间孩子占据整个空间,所以我设置它flex: 1.到现在为止还挺好.

下一个级别是中间孩子有2个孩子所以我也想设置它灵活(如果你失去了我,只是跳到片段)和第一个孩子我设置省略号样式.现在,省略号停止工作.

如果你点击按钮,你会发现短文的一切都很好;

有任何想法吗？

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>