Text-Overflow Ellipsis on Flex Child Not Working

text-overflow ellipsis on flex child not working

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>

text-overflow: ellipsis not working on nested flex container

You need to remove flex for .label and to align, use align-items: center; for its parent.

.parent-container {  align-items: stretch;  display: flex;  flex-flow: column nowrap;  width: 100%;}
.item-container {  border: 1px solid #ebf0ff;  border-radius: 0.25rem;  display: flex;  align-items: center;  flex-flow: row nowrap;  height: 3.25rem;  margin: 0.5rem 1rem;  padding: 0.5rem 1rem;}
.label {  flex-flow: row nowrap;  font-family: sans-serif;  font-weight: 500;  min-width: 0;  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;}

<!DOCTYPE HTML>
<html>
<body>  <div class="parent-container">    <div class="item-container">      <span class="label">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>    </div>  </div></body>
</html>

Ellipsis not working in flex container

Solution

You have overflow: hidden applied to .song-title.

It also needs to be on the parent:

.song-wrapper {
   overflow: hidden; /* NEW */
   background: beige;
   display: flex;
   flex-grow: 1;
}

.wrapper {  display: flex;  align-items: center;}ul {  display: inline-block;  list-style: none;  flex-shrink: 0;}li {  display: inline-block;  width: 30px;  height: 30px;  background: red;  margin-right: 3px;}.song-wrapper {  background: beige;  display: flex;  flex-grow: 1;  overflow: hidden;}.song-title {  background: aqua;  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;  flex-grow: 1;}

<div class="wrapper">  <ul>    <li></li>    <li></li>    <li></li>  </ul>  <div class="song-wrapper">    <span>1:23</span>    <span class="song-title">This is the song title and I want it to ellipsize if the screen shrinks</span>    <span>4:22</span>  </div></div>

text-overflow is not working when using display:flex

Your problem here is the lack of "flex-children". These would need to contain the styles to truncate an element, not the parent container.

Try moving the truncate properties to a separate .flex-child class like so:

.flex-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Source and detailed explanation: https://css-tricks.com/flexbox-truncated-text/

Text ellipsis isn't working for a column flexbox self

div {  display: flex;  align-items: center;  justify-content: center;  border: 1px solid red;  width: 200px;  height: 200px;}
.wrapper {  display: flex;  border: 1px solid blue;  text-align: center;}
span.text:before {  content: "\A";  white-space: pre;}
span.gr-bc {  background: lightgray;}
a {  align-items: center;  justify-content: center;  flex-direction: column;  flex: 0 1 100px;  text-overflow: ellipsis;  white-space: nowrap;  overflow: hidden;  width: 100px;}
a:before {  content: 'icon';  background: lightblue;  height: 45px;  width: 45px;  margin-bottom: 8px;}

<div>  <span class="wrapper">    <a>      <span class="text">        <span class="gr-bc">          test123tfdsfsdafdsaffdsfdsafsadfest456          </span>  </span>  </a>  </span></div>

ellipsis does not work (flexbox)

For text overflow to work you need a set width - set a width to your grid-row.

Also remove the display: flex from the grid-cell - see demo below:

.grid-row {  display: flex;  width: 250px;}.grid-cell {  /*display: flex;*/  flex-grow: 3;  flex-basis: 0;  /*align-items: center;*/  padding: 10px;  overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis;}
.grid-cell:first-child {  flex-grow: 1;  justify-content: center;}

<div class="grid-row">  <div class="grid-cell">insert text here</div>  <div class="grid-cell">some text</div>  <div class="grid-cell">some more text here</div></div>

Use text-overflow: ellipsis and flexbox align-items: center in combination

text-overflow: ellipsis won't work on flex container (display: flex).

The main reason is that the text node becomes a anonymous flex child and needs min-width: 0 to behave (or else it won't shrink beyond its content size), but as one can't target a text node with CSS, we need to wrap it, here done with a span.

Here's a post that have a great explanation for The Automatic Minimum Size of Flex Items

Note 1: The parent overflow is caused by the width + padding, and box-sizing: border-box will fix that.

Note 2: For the align-items: center to have an effect, the item need a height, here given 50px.

Stack snippet

.wrapper {  display: flex;  flex-direction: column;  background-color: lightcoral;  padding: 10px;}
.wrapper__item {  align-self: flex-start;  max-width: 100%;  overflow: hidden;  display: flex;  align-items: center;  justify-content: center;  box-sizing: border-box;  padding: 5px 10px;  border: 1px solid black;  border-radius: 5px;  margin-bottom: 10px;  background-color: white;  height: 50px;}.wrapper__item span {  white-space: nowrap;  text-overflow: ellipsis;  overflow: hidden;}

<div class="wrapper">  <div class="wrapper__item"><span>Proin eget tortor risus. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum congue leo eget malesuada. Vivamus suscipit    tortor eget felis porttitor volutpat. Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec rutrum congue leo eget malesuada. Curabitur arcu    erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta.</span></div>
  <div class="wrapper__item">Proin eget tortor ri.</div>
  <div class="wrapper__item">Proin eget tortor ri.Proin eget tortor ri.</div></div>

Text-Overflow Ellipsis on Flex Child Not Working