Truncating text is a common task for web developers. It can be used to keep text on a single line, or to limit the amount of text displayed in a given area. The text-overflow property is the key to achieving this effect. It adds ellipsis (three periods) to the end of a text string if it doesn't fit inside the container.
This property is also known as the box text handler, as it adjusts the text according to the available white space. By default, the whitespace in the box is set to normal. This means that any text that reaches the limit of the container will be automatically adjusted and moved to the next line. To keep the text on a single line, you can set the whitespace property to nowrap.
The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. It can be cropped, or show ellipsis (three periods). This property only affects content that overflows a block containing element in its inline progression direction (not text that overflows at the bottom of a box, for example). The text-overflow property can be specified with one or two values.
If one value is given, it specifies the overflow behavior for the end of the line (the right end for left-to-right text, and the left end for right-to-left text). If two values are given, the first one specifies the overflow behavior for the left end of the line and the second one specifies the overflow behavior for the right end of the line. The most common value used to represent cropped text is ellipsis (three periods). This string is displayed within the content area, which reduces its size.
If there isn't enough space to display it, it will be trimmed. Another value is truncation, which trims overflowing online content and applies a fade effect near the edge of the line box with full transparency on its border. An earlier version of this interface reached Candidate Recommendation status. As some features that were not at risk needed to be removed, it was downgraded to Working Draft level, which explains why browsers implemented this property without prefixes, even though it wasn't in CR state. At one point, truncating text with CSS was exaggerated rather than just showing all of it, which could be one or more lines. We ended up doing ellipsis (three periods) instead.
The file with LONG TEXT shrinks until it meets the last letter and doesn't go further to be truncated. Recently, however, I faced a challenge on the front-end in CSS where I needed to truncate text for multiple lines. You can use CSS's text overflow property in combination with whitespace and overflow properties to truncate or trim long texts and add periods or ellipses (three periods). The direction property will truncate text at the beginning of a line and instead display its end. The value that worked for me when I wanted to show three periods at the end of my truncated text was ellipsis (three periods).
With line-clamping text you can truncate it after multiple lines; what's even more interesting is that you can specify which line number you want to truncate it at. In conclusion, truncating text with CSS is an effective way to keep your webpages looking neat and organized. The key is understanding how to use whitespace and overflow properties in combination with text-overflow property and its values.
Leave Reply