text-overflow ellipsis on flex child not working [duplicate]

by

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>

More Related Contents:

  1. Make a div span two rows in a grid
  2. Fill remaining vertical space with CSS using display:flex
  3. How does flex-wrap work with align-self, align-items and align-content?
  4. Flex-box: Align last row to grid
  5. Text in a flex container doesn’t wrap in IE11
  6. Better way to set distance between flexbox items
  7. What’s the difference between align-content and align-items?
  8. How does flex-shrink factor in padding and border-box?
  9. Areas covered by Flexbox which are difficult or impossible to achieve with Grid
  10. What does flex: 1 mean?
  11. Margin collapsing in flexbox
  12. How to change flexbox wrap?
  13. Create a Masonry grid with flexbox (or other CSS)
  14. css grid of squares with flexbox
  15. Every item to have the same width as the widest element [duplicate]
  16. Set flexbox children to have different heights to use up available space
  17. Prevent flex item from exceeding parent height and make scroll bar work
  18. Are flex items block level element?
  19. Bootstrap change order of columns
  20. Flex auto margin not working in IE10/11
  21. What are allowed values of the `display` property for a flex-item? (layout of flex-item’s children is irrelevant)
  22. Without media queries how to achieve 3 column desktop to 1 column mobile layout
  23. The difference between flex:1 and flex-grow:1
  24. How to control number of items per row using media queries in Flexbox?
  25. Vertically center items with flexbox
  26. How to stretch children to fill cross-axis?
  27. Issue when centering vertically with flexbox when heights are unknown
  28. Do I not understand the flex-grow property?
  29. Row Wrap in flex-box not wrapping in Safari
  30. What exactly flex-basis property sets?

Leave a Comment