Sometimes, we want to fix text-overflow: ellipsis not working with CSS.
In this article, we’l look at how to fix text-overflow: ellipsis not working with CSS.
How to fix text-overflow: ellipsis not working with CSS?
To fix text-overflow: ellipsis not working with CSS, we need to set the width or max-width of the element.
For instance, we write
span {
border: solid 2px blue;
white-space: nowrap;
text-overflow: ellipsis;
width: 100px;
display: block;
overflow: hidden;
}
to set the width of the span.
And then we use white-space: nowrap; to keep all the content to 1 row.
We use overflow: hidden; to hide any overflowing content.
And we use text-overflow: ellipsis; to add an ellipsis after the truncated content.
Conclusion
To fix text-overflow: ellipsis not working with CSS, we need to set the width or max-width of the element.
