Overflow ellipsis after x lines with line-clamp

Published at: Mar 02 2018
Updated at: Sep 17 2022
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 completely 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

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.