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 suggests in his answer，min-width: 0也应该可以工作，并且确实跨越了浏览器，尽管IE是错误的，需要overflow

child2需要它的原因是因为它也是一个弹性项目，而flex项目（在本例中为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>

Answer 2

这就是你想要的。？

我只是将overflow:hidden;text-overflow: ellipsis;添加到您的.child2

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;
  overflow:hidden;
  text-overflow: ellipsis;
}

.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 3

显然，如果我设置中间孩子的min-width: 0（.child2），它就会神奇地起作用。

更新根据@LGSon，它不适用于IE。

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;
  min-width: 0;
}

.flex {
  display: flex;
}

.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 4

那是因为类.el没有设置宽度。使用下面的CSS，效果很好：

.el {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 3em;
}

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

4 个答案: