Truncating text is a common task for developers, and there are many ways to do it. Recently, I faced a challenge on the front-end in CSS, where I needed to truncate text for multiple lines without using JavaScript. To solve this problem, I used the CSS text overflow property in combination with the whitespace and overflow properties. This allowed me to trim long text and put periods (or ellipses) at the end of the truncated text. The HTML5 tag does not support the label color property, so I had to use CSS style to add font color.
For example, I was able to turn a link that read “This is a text with a link” into “This is a text with a link...” which could then be safely truncated. The value that worked for me when I wanted to show three periods at the end of my truncated text was the ellipsis. In some cases, you may need to truncate marked text. To do this, you'll have to make sure you don't truncate in the wrong place. One way to check if an element is truncated is to compare its scrollHeight and offsetHeight.
If scrollHeight is greater than offsetHeight, then the element is truncated. In such cases, you can temporarily convert the data that is truncated into plain text. This will help you avoid any potential issues with marks or other formatting. In conclusion, using the CSS text overflow property in combination with whitespace and overflow properties is an effective way to truncate or trim long text and put periods (or ellipses) at the end of the truncated text. This method works well for plain unmarked text, but if your paragraph contains marks or other formatting, you'll need to take extra care to ensure that you don't truncate in the wrong place.
