Using text-overflow and line-clamp Properties
The CSS properties text-overflow and line-clamp allow you to shorten text whenever a container width or height is reached, regardless of the number of characters.
To create well-formed layouts, it may be necessary to truncate text to a certain maximum length, regardless of their character count. Especially when we develop layouts for websites that are maintained via CMS by an editorial team, we need to be confident that the layouts maintain their symmetry and aesthetics as much as possible, regardless of their content. There are a variety of approaches to this, but probably the simplest is with CSS text-overflow and line-clamp properties.
Shorten single-line text with CSS text-overflow
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Initial situation: Width limited container with long text. The text breaks into a new line.
First, we need to prevent the text from wrapping to a second line. We achieve this with white-space: nowrap.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
The CSS property white-space: nowrap; prevents the text from wrapping.
Second requirement is the statement overflow: hidden, so that the text does not overflow its container.
The overflow: hidden; statement truncates overflowing text.
Now we can use text-overflow: ellipsis to not just truncate the text at the right container edge, but to create an ellipsis.
CSS property text-overflow: ellispis;
The full CSS code looks like this:
p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}Shorten multiline text with CSS line-clamp
Currently the line-clamp property is in Editor’s Draft, to use this property, you will need to add a vendor prefix of -webkit-.
With CSS line-clamp we can set the maximum number of lines a text may wrap to. Here again the initial situation:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Initial situation: Container limited in width with multiple lines of text.
The prerequisite is the combination with CSS display: -webkit-inline-box or display: -webkit-box, as well as -webkit-box-orient: vertical and overflow: hidden.
With the following CSS code we can now easily limit the maximum number of lines to three. An ellipsis will also be added automatically at the end of the third line. The browser prefix -webkit- is currently necessary in all browsers.
p {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}Results in the text limited to three lines.
