CSS truncate text using text-overflow
CSS 0 CommentsIn 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
mdntext-overflow
CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis (‘…
‘), or display a custom string.
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.
Property | |||||
---|---|---|---|---|---|
text-overflow | 4.0 | 6.0 | 7.0 | 3.1 | 11.0 9.0 -o- |
Thanks for reading, Please share with love.
Leave a Reply