The interesting thing of reviewing someone else's code is that you discover things you didn't know. That way I learned today about webkit-line-clamp
. My first thought was to decline the vendor prefixed property, but I was really surprised to find out that it got standardized for legacy support!
So what does it do? webkit-line-clamp
is basically a multi-line ellipsis. You can specify a certain number of lines and the last one will end in an ellipsis.
p {
width: 300px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
Top comments (1)
Please note that this feature (with the
-webkit
prefix) is supported in Firefox and Safari too. I didn't test Edge, but that should give similar results.