CSS truncate text using text-overflow

In this article, we will learn how to truncate the text using pure CSS with a simple CSS property and will also talk about its working conditions.

CSS truncate text is my favorite because in the past, that little thing I used to do it with JavaScript. And it is a too common problem when you need to populate data that comes from CMS or from APIs.

Example

See the Pen CSS-Only Text Truncation by Rajnish (@rajnish_rajput) on CodePen.

The text-overflow CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis (‘…‘), or display a custom string.

mdn

Note: Remember to make text-overflow: ellipsis; working you need to add overflow and white-space CSS properties too, For example:

overflow: hidden;
white-space: nowrap;

The above properties are required to make CSS truncate text works.

The text-overflow only works on the content that is overflowing a block container element in its inline progression direction

Browser Support

The text-overflow property is fully supported in all the browsers and almost all versions so, you don’t need to worry about it.

Note: To support Opera Browser you need to add -o- prefix.

Thanks for reading, Please share with love.