MoFed
Published in

MoFed

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.
  • 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.
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.

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.

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.

We are Front End Developers