CSS: text-overflow handling

If anywhere in the HTML document, you want to display text within a specific width in such a way that if stays there in that width. In case the text is too long and going out of that width, luckily CSS provides solution for this.

Get Wajeeh Ahsan’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Use this

text-overflow:ellipsis;
overflow: hidden;
white-space:nowrap;
width: XXXpx;

NOTE: text-overflow:ellipsis; only works when the following are true:

• The element’s width must be constrained in px (pixels). Width in % (percentage) won't work.
• The element must have overflow:hidden and white-space:nowrap set.