Overflow ellipsis after x lines

Published at
Updated at
Reading time
1 min

This post is part of my Today I learned series in which I share all my learnings regarding web development.

This is a really quick one and I'm writing this post mainly so that I can quickly find it in the future. Manuel Matuzoviฤ‡ shared a "Today I learned" tweet the other day which completely blew my mind.

It shares the following CSS to truncate a paragraph after three lines.

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

-webkit-box? -webkit-line-clamp? What?

I've never heard of these CSS properties. I definitely have to learn more about these in the near future. If you want to read more about this Topic Manuel also shared this article.

You have to be careful though, the support of line-clamp is not that great today (Chrome, Safari, Opera) but hey... that's already something.

Related Topics

See null comment.