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.

Answer 1

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:

• Applying an ellipsis to multiline text
• How do I vertically center text with CSS?