Overflow ellipsis after x lines with line-clamp
- Published at
- Updated at
- Reading time
- 1min
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:
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.
6 | 6 | 17 | 68 | 68 | 5 | 5 | 1.5 | 6 |
Funny times!
Join 5.3k readers and learn something new every week with Web Weekly.