Text
-webkit-line-clamp
-webkit-line-clamp cuts text off after a set number of lines and adds "…" at the end of the last one. It is handy for keeping card descriptions to two or three lines.
Syntax
none | <integer [1,∞]>Preview
Code
.box {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 2;
}Controls
About
As a leftover from an older layout model, it only works together with display: -webkit-box and -webkit-box-orient: vertical. It also needs overflow: hidden to hide the remaining lines. The code on this page includes all three.
Writing the value
none: no truncation. This is the initial value.- An integer of 1 or more, such as
2: shows that many lines and adds "…" at the end of the last one.
Despite the -webkit- prefix, all major browsers support it. The spec also defines an unprefixed line-clamp, but hardly any browser supports it yet.
Leave the height alone
If the box has a fixed height, the lines after the cut still show inside it. Let the height follow the content instead. Also, overflow: hidden only clips inside the padding, so bottom padding lets the top of the next line peek through. The preview on this page uses a transparent bottom border for that space instead.
For a single line
To cut off a single line, white-space: nowrap with text-overflow: ellipsis also works.