CSS Line-Clamp — The Good, the Bad and the Straight-up Broken

If you need to truncate text after one line, then the text-overflow: ellipsis; is a great option — or any of the other text-overflow values. If you need to truncate text after more than one line, however, things get hairy. -webkit-line-clamp aims to resolve this, but there are several caveats. Here are some things to consider, starting with the bad news first.

The Bad News First

• Limited Support: -webkit-line-clamp is not supported by Internet Explorer (IE), Microsoft Edge, Firefox or Opera Mini. It is, however supported by all other browsers as of the time of this writing.
• Weird Break Points: “I Soldered the Cathode to the Main Board” can easily become “I Soldered the Cat…” Thanks, Ellipsis. It does not break on spaces only — it will often break mid-word. I can’t see the logic to how it breaks, though — sometimes it’s on spaces, sometimes it cuts off the last one, two or three letters of a word. I have tried this with short, two-letter words and it will even cut off the last letter, leaving just one. Other times it will refuse to truncate a word at all. Super weird. The reason I bring this up is because cutting words up can cause significant changes to their meanings, particularly in headlines and such.

• No RTL Support: It does not support any text with a direction: rtl property. The -webkit-line-clamp gets ignored altogether. You can see this in action in my Line Clamp RTL Codepen.
• Muchos Dependencies: It requires a lot of supporting properties. Check it:

overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

• No Spaces? No Support: If the language doesn’t use spaces, -webkit-line-clamp doesn’t know what to do so it doesn’t apply. I tried this out with common Chinese, for example, and it gets ignored altogether.
• No Alternate to the Ellipsis: If you wanted to use something besides the ellipsis at the end of the truncated line, you cannot.
• Language Considerations: Because line clamp doesn’t offer an alternative to the ellipsis, you may get different (potentially unintended) meanings in different languages. For example, in Polish, an unbracketed ellipsis indicates an interruption or pause in speech. So […] is great, but … indicates a pause or interruption. In Japanese and Chinese, the ellipsis is supposed to be vertically centered on the line of text — midway between the baseline and top of the line. Line Clamp doesn’t support this. There are other language considerations for the ellipsis as well.

Now For The Good

• Ellipsis That Text!: Its basic function is really helpful. You tell it how many lines you want to limit the text to and it will do so and add an ellipsis after the last word or portion of a word that is shown.
• Fallbacks: Because it’s a CSS property, you can create fallbacks for other browsers that don’t support it. You can use the @supports (-webkit-line-clamp: 2) {} check to see if that works in the browser you’re in and provide a fallback for browsers that don’t. I wrote up a Codepen that shows a Pure CSS Line Clamp solution with cross-browser fallbacks.

There’s Always Javascript…

There are, of course, Javascript alternatives and, like all things code, there are 9 ways to skin this cat. You can see an example of a way I use to code an ellipsis that works in all browsers and could potentially be expanded to include better support for other languages as well.

Have you learned anything about using -webkit-line-clamp that you can share? Leave a comment and share it with the world.