Geek Answers Handbook

Text ellipse not showing in flexbox element

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

I tried using other solutions I found, such as min-width , max-width , flex: 0 1 auto , etc. But none of them seem to work. Ellipsis is not displayed.

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 demonstrating the problem: https://jsfiddle.net/dpbejpou/1/

Note. I already tried using other solutions, as I said, such as min-width, max-width (which you can already see in my code) found at this link , but the code does not work.

+5
source share
3 answers

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

In addition, text-overflow: ellipsis only works with block-level elements.

The flex element is considered locked and the ellipsis will work. However, you also apply display: flex to display: flex elements, which violates the block level rule for the display property.

Try the following settings:

 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 script

To vertically center the text, you can use the flexible layout for elements with non-ellipsis, as before. To vertically center the ellipsis text, try a different method .

Literature:

+1
source

Try this feed

Markup range added:

 <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 only this css:

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

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

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

Demo

0
source

More articles:


All Articles