Published at
Updated at
Reading time
1min
This post is part of my Today I learned series in which I share all my web development learnings.

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 blew my mind.

Manuel shared the following CSS to truncate a paragraph after three lines.

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

See it in action below:

Playground
Choose after how many lines an ellipsis should be shown
Preview

I'm an example paragraph! 👋 Doggo ipsum shoob long water shoob h*ck smol fat boi, vvv wow very biscit. shibe heckin good boys and girls shoob. Bork ur givin me a spook pupper pats long bois very hand that feed shibe, you are doing me the shock adorable doggo shibe you are doin me a concern.

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

And even though the CSS properties are -webkit prefixed, it seems like all major browsers support it.

MDN Compat Data (source)
Browser support info for -webkit-line-clamp
chromechrome_androidedgefirefoxfirefox_androidsafarisafari_iossamsunginternet_androidwebview_android
66176868551.56

Funny times!

If you enjoyed this article...

Join 5.3k readers and learn something new every week with Web Weekly.

Web Weekly — Your friendly Web Dev newsletter
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles