Overflow ellipsis after x lines (#tilPost)

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 followi…


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis

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.


Reply to Stefan


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis


Print Share Comment Cite Upload Translate
APA
Stefan Judis | Sciencx (2023-02-04T23:29:49+00:00) » Overflow ellipsis after x lines (#tilPost). Retrieved from https://www.scien.cx/2018/03/01/overflow-ellipsis-after-x-lines-tilpost/.
MLA
" » Overflow ellipsis after x lines (#tilPost)." Stefan Judis | Sciencx - Thursday March 1, 2018, https://www.scien.cx/2018/03/01/overflow-ellipsis-after-x-lines-tilpost/
HARVARD
Stefan Judis | Sciencx Thursday March 1, 2018 » Overflow ellipsis after x lines (#tilPost)., viewed 2023-02-04T23:29:49+00:00,<https://www.scien.cx/2018/03/01/overflow-ellipsis-after-x-lines-tilpost/>
VANCOUVER
Stefan Judis | Sciencx - » Overflow ellipsis after x lines (#tilPost). [Internet]. [Accessed 2023-02-04T23:29:49+00:00]. Available from: https://www.scien.cx/2018/03/01/overflow-ellipsis-after-x-lines-tilpost/
CHICAGO
" » Overflow ellipsis after x lines (#tilPost)." Stefan Judis | Sciencx - Accessed 2023-02-04T23:29:49+00:00. https://www.scien.cx/2018/03/01/overflow-ellipsis-after-x-lines-tilpost/
IEEE
" » Overflow ellipsis after x lines (#tilPost)." Stefan Judis | Sciencx [Online]. Available: https://www.scien.cx/2018/03/01/overflow-ellipsis-after-x-lines-tilpost/. [Accessed: 2023-02-04T23:29:49+00:00]
rf:citation
» Overflow ellipsis after x lines (#tilPost) | Stefan Judis | Sciencx | https://www.scien.cx/2018/03/01/overflow-ellipsis-after-x-lines-tilpost/ | 2023-02-04T23:29:49+00:00
https://github.com/addpipe/simple-recorderjs-demo