How to truncate multiline text with ellipsis in CSS (line-clamp).

Today we’re going to talk about how to truncate multiline text with ellipsis using an excellent CSS property called line-clamp.

The line-clamp property gives you the ability to easily truncate text at a specific number of lines—something like this.

example of line clamp

This may sound like a trivial task to accomplish without line-clamp, but I assure you, the hackiness you have to go through to make this work is surprising.

how to use line-clamp

The line-clamp property accepts two values. The first value is none, which is basically equal to not setting line-clamp at all. Meaning, it doesn’t have any truncating effect. The second value is a number, which sets the max number of lines before truncating the content and then displays an ellipsis (…) at the end of the last line.

.module {
  line-clamp: [none | <integer>];
}

Although line-clamp is unsupported by all the major browsers at the moment, you can actually get the feature to work by using a -webkit- prefix and pretty much get full support.

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Conclusion

That is it for line-clamp! Thank you for reading this post, and if you’d like to get notified of when I post something new? Please sign up for my newsletter!