Sometimes, we want our text to be in a straight line. To achieve this, we can set a whitespace property to the nowrap value and use the text-overflow property to specify how overflowed content that is not displayed should be signaled to the user. It can be cropped or show an ellipsis. In step 1, we'll create an HTML element to place the text we want to truncate inside.
For this tutorial, we'll use a span tag. You may have seen important websites with truncated text in the sidebar to keep things organized. 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 or ellipses. For the multiline solution, the whitespace property must be removed so that the text will be truncated to the last available line.
If the text is longer than 3 lines, it should be truncated. This keyword value will truncate text at the boundary of the content area, so it can occur in the middle of a character. To solve this challenge on the front-end in CSS, you can use some solutions such as truncating or elipsizing a text (adding three points) or wrapping the text. The value that worked for me when I wanted to show three periods at the end of my truncated text was the ellipsis.
In conclusion, you can use CSS text overflow property in combination with whitespace and overflow properties to truncate long text and put periods or ellipses. For multiline solutions, you must remove whitespace property so that the text will be truncated to the last available line. You can also use other solutions such as truncating or elipsizing a text (adding three points) or wrapping the text.
Leave Reply