Text ellipsis doesn't show on flexbox item

Question

I've tested text-overflow: ellipsis on chrome and firefox and both have shorten the text, but it just doesn't show the '...' at the end. What is wrong with it?

I have tried using other solutions I found here such as min-width, max-width, flex: 0 1 auto, etc.. But none of them seem to be working. The ellipsis doesn't show up.

This is my code:

ul {
  display: flex;
  height: 40px;
  margin: 0;
  padding: 0;
  width: 100%;
  list-style: none;
}
ul li {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 4px;
  border-bottom: 1px solid #eee;
}
ul li:first-child {
  width: 55px;
  flex-shrink: 0;
}
ul li:first-child input {
  width: 100%;
}
ul li:last-child {
  width: 48px;
  flex-shrink: 0;
}
ul li:nth-child(2) {
  flex: 0 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0px;
}
ul li:nth-child(3) {
  width: 75px;
  flex-shrink: 0;
}

Here is a fiddle to demonstrate the problem: https://jsfiddle.net/dpbejpou/1/

Note: I already tried using others solutions, like I said, such as min-width, max-width (which you can see already is in my code) found on this link but the code stil doesn't work.

Possible duplicate of [text-overflow in combination with flexbox not working](http://stackoverflow.com/questions/31069474/text-overflow-in-combination-with-flexbox-not-working), but you also need an inner wrapping element: https://jsfiddle.net/dpbejpou/2/ — Pete, May 03 '16 at 14:20
@Pete like I said in the question, I already used the `min-width` solution, which already is in the code but still doesn't work. This is why I made a new question. — celsomtrindade, May 03 '16 at 14:24
@Pete i do not think so, here we have displayflex; + text-overflow on same tag, wich is not compatible (and somehow not coherent , it is flex and it can eventually wrap), i guess display:table/table-cell and table-layout will handle this — G-Cyrillus, May 03 '16 at 14:24
https://jsfiddle.net/dpbejpou/3/ table layout to see behavior. your flexbox item is also a flexbox , you should edit your title question, so no one gets confused about this ;) — G-Cyrillus, May 03 '16 at 14:31
@GCyrillus with table I had this working, but I was trying to keep with pure flexbox.. I'm starting to think to go back with table. But your code seems a greate alternative! — celsomtrindade, May 03 '16 at 14:32
I have shared some solution and removed display flex from li and it is working now. https://jsfiddle.net/dpbejpou/7/ — Mohit Raj Purohit, May 03 '16 at 17:01

score 1 · Accepted Answer · edited May 23 '17 at 12:02

For text-overflow: ellipsis to work, you must have a width defined. You have flex-basis: auto, which is not enough.

Also, text-overflow: ellipsis only works on block-level elements.

A flex item is considered blockified and ellipsis will work. However, you're also applying display: flex to the flex items, which breaks the block-level rule for the display property.

Try these adjustments:

ul {
  display: flex;
  height: 40px;
  margin: 0;
  padding: 0;
  width: 100%;
  list-style: none;
}
ul li {
  /* display: flex;           <-- remove */
  /* align-items: center;     <-- will no longer work */
  height: 100%;
  padding: 0 4px;
  border-bottom: 1px solid #eee;
}
ul li:first-child {
  width: 55px;
  flex-shrink: 0;
}
ul li:first-child input {
  width: 100%;
}
ul li:last-child {
  width: 48px;
  flex-shrink: 0;
}
ul li:nth-child(2) {
  flex: 0 1 100px;              /* adjusted; 100px for demo only */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0px;
}
ul li:nth-child(3) {
  width: 75px;
  flex-shrink: 0;
}

<ul>
  <li><input type="number" value="1"></li>
  <li>A very long text description goes here</li>
  <li>$99.90</li>
  <li>Del</li>
</ul>

Revised Fiddle

To vertically center the text, you could use flex layout on the non-ellipsis elements, like you had before. To vertically center the ellipsis text, try another method.

References:

You had an awesome explanation. Thank you so much! I already know how to proceed now. Thanks! — celsomtrindade, May 03 '16 at 18:13

user3127632 · Answer 2 · 2016-05-03T15:24:04.230

0

Try this one Fiddle

A span added to markup:

<ul>
  <li><input type="number" value="1"></li>
  <li><span>A very long text description goes here</span></li>
  <li>$99.90</li>
  <li>Del</li>
</ul>

And just this css:

ul li:nth-child(2) span {
    max-width: 135px; //change it to any max value you like
    overflow: hidden;
    text-overflow: ellipsis;
}

edited May 03 '16 at 15:24

answered May 03 '16 at 15:20

user3127632

377
5
20

score 0 · Answer 3 · answered May 03 '16 at 16:41

0

You just need to remove the display flex property of li. Please check the demo.

ul li {
  align-items: center;
  height: 100%;
  padding: 0 4px;
  border-bottom: 1px solid #eee;
}

Demo

answered May 03 '16 at 16:41

Mohit Raj Purohit

280
1
7

Text ellipsis doesn't show on flexbox item

3 Answers3