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.
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>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:
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments