flex小孩不工作的文本溢出省略号 [英] text-overflow ellipsis on flex child not working

问题描述

我有 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;宽度：200px; align-content：stretch;填充：5px;最小宽度：0; border：1px solid} .wrapper .child2 {flex-grow：1;}。flex {display：flex; min-width：0;}。el {white-space：nowrap;溢出：隐藏; {} {padding：5px;} pre>

< div class =wrapper> < div class =child1> child1< / div> < div class =child2> < div class =flex> < div class =el> long long long text< / div> < DIV>一种与LT; / DIV> < / DIV> < / DIV> < div class =child3> child3< / div>< / div>< button onclick =toggle（）>切换省略号文字< / button>

解决方案

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

其实，中，Mush Feu建议， min-width：0 也应该可以工作，虽然IE是bug，并且需要 overflow

原因还有 child2 需要它，因为它也是一个flex项目，flex项目，在这种情况下 min-width ，默认为 auto code>，并且不允许它小于它的内容，所以通过添加 overflow：hidden （或者任何值，但是可见），或 min-width：0 ，将会让它。

function toggle（）{var el = document.querySelector（'。el'）; el.textContent = el.textContent ==='short'？ 'long long long text'：'short';}

.wrapper {display：flex;宽度：200px; align-content：stretch;填充：5px;最小宽度：0; border：1px solid} .wrapper .child2 {flex-grow：1; overflow：hidden;}。flex {display：flex; min-width：0;}。el {white-space：nowrap;溢出：隐藏; {} {padding：5px;} pre>

< div class =wrapper> < div class =child1> child1< / div> < div class =child2> < div class =flex> < div class =el> long long long text< / div> < DIV>一种与LT; / DIV> < / DIV> < / DIV> < div class =child3> child3< / div>< / div>< button onclick =toggle（）>切换省略号文字< / button>

I have container with flex. I want the middle child will take the entire space so I set it flex: 1. So far so good.

The next level is that the middle child has 2 child so I want to set it flex too (If you lost me, just skip to the snippet) and the first child I set ellipsis styles. Now, the ellipsis stops working.

If you will click on the button, you will see that everything good with short text;

Any ideas?

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.

Actually, as Mosh Feu suggests in his answer, min-width: 0 should also work, and does, cross browser, though IE is buggy and need overflow

The reason also the child2 need it, is because it is also a flex item, and flex item's, in this case min-width, defaults to auto, and won't allow it to be smaller than its content, so by adding overflow: hidden (or any value but visible), or min-width: 0, will let it.

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>

这篇关于flex小孩不工作的文本溢出省略号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！