Do you need to limit the width of a div to prevent long words from breaking your design? Or do you want your text to be in a straight line? Truncating or elipsizing text (adding three points) and wrapping the text are two solutions that can help you achieve this. But, recently, a new challenge has emerged on the front-end in CSS: truncating text for multiple lines. Fortunately, there is a solution. You can use the CSS text overflow property in combination with the whitespace and overflow properties to truncate or trim long text and put periods (periods or ellipses (.
The value that worked for me when I wanted to show three periods at the end of my truncated text was the ellipsis. To use this approach, you must set a whitespace property to the nowrap value. This will limit the width of the div and have an effect similar to the one you publish. Additionally, you must set the line-clamping property on the overflowing element and the value must equal the number of lines to be spanned.
Finally, you must remove the whitespace property so that the text will be truncated to the last available line. Truncating text in HTML is a simple and more understandable solution when it comes to limiting multiline text. With this approach, you can ensure that your design remains intact while still displaying all of your content.
