Published at
Updated at
Reading time
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:

Choose after how many lines an ellipsis should be shown

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

Funny times!

Was this TIL post helpful?
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 3 days ago.
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