The line-clamp property clips text to a certain number of lines.
The spec for it is currently in Working Draft (WD) status, so that means it’s still not set in stone because it’s still a work in progress. However, it is defined as a shorthand for max-lines and block-overflow, the former of which is marked as in danger of being removed in the current Candidate Recommendation.
It’s easy to see how max-lines will be excluded since its function (setting the number of lines before truncation) is already built into line-clamp and further abstraction may not be necessary.
line clamp: [none |
line-clamp takes the following values in the current draft specification:
none: Does not set a maximum number of lines, and no truncation occurs as a result.
This ellipsis should appear as a Unicode (U+2026) character, but can be replaced with an equivalent depending on the language of the content and the notation used by the User-Agent.
Hey can I do this with text-overflow?
A fair question, my friend, and the answer is: well…
text-overflow does indeed have an ellipsis value that cuts off the text:
/* Needed to make it work */
Nice picture, good start. But what if we want to enter an ellipsis not in the first line, but somewhere, say, in the third line of text?
This is where the line-clamp comes into play. Just note that this uses a combination of three properties:
Firefox now supports it this way (with -webkit- prefixes and all).
So what’s the catch?
At the moment it is browser support. Line clamps are part of CSS Overflow Module Level 3 which is currently in Working Draft (WD) and may not be fully supported in some browsers at this time.
We can get this effect (line clamp) using the -webkit- prefix (which, oddly enough, works in all major browsers). Therefore, this is how the demonstration above was done.