Sometimes, we want our text to be in a straight line. To achieve this, we can set the whitespace property to the nowrap value. The text-overflow property only affects content that overflows a block containing element in its inline progression direction. It can be specified with one or two values.
If a value is given, it specifies the overflow behavior for the end of the line. 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 string is displayed within the content area, which reduces the size of the displayed text. If there is not enough space to display the string itself, it is trimmed.
This keyword trims overflowing online content and applies a fading effect near the edge of the line box with full transparency on the border. This example displays different values for text overflow applied to a paragraph, for left-to-right, and right-to-left text. The two-value syntax for text overflow allows us to define a different overflow behavior for the start and end of text. To show this effect, we need to move the line so that the start of it is also hidden.
An earlier version of this interface reached Candidate Recommendation status, but some features that were not at risk needed to be removed, so it was downgraded to Working Draft level. There are also techniques that allow us to truncate text after several lines, but they are a little more problematic to implement. For multiline solutions, we must remove whitespace property so that text will be truncated to last available line. This keyword value will truncate text at boundary of content area, therefore truncation can occur in middle of character.
The file with LONG TEXT shrinks until button meets last letter and does not go any further to be truncated. The value that worked for me when I wanted to show three periods at end of my truncated text was ellipsis. To solve this issue, we can use some solutions such as truncating or elipsizing a text (adding three points) or wrapping text. But recently I faced challenge on front-end in CSS where I needed to truncate text for multiple lines.
When using Rails to truncate strings, we may end up with strings that are still too long for our container or that aren't as long as they might be. We can use CSS text overflow property in combination with whitespace and overflow properties to truncate or trim long text and put periods (periods or ellipses (. Without aligning text overflow solution, this approach is simple and more understandable when it comes to truncating multiline text.
Leave Reply