Flotation full text ellipsis not working

Question

I have a container with flex. I want the middle child to take up all the space, so I installed it flex: 1. So far so good.

The next level is that the middle child has 2 children, so I also want to customize it (if you lost me, just go to the snippet), and the first child set the ellipsis styles. Now the ellipsis stops working.

If you click on the button, you will see that everything is fine 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>

Run codeHide result

Answer 1

Add overflow: hidden;to .wrapper .child2.

, , 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>

Hide result

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>

Hide result

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>

Hide result

Answer 4

This is because the .el class has no width. Use the CSS below and it works well:

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