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.
text-overflowCSS 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
white-space CSS properties too, For example:
overflow: hidden; white-space: nowrap;
The above properties are required to make CSS truncate text works.
text-overflow only works on the content that is overflowing a block container element in its inline progression direction
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
Thanks for reading, Please share with love.