What is webkit-line-clamp?

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;
}

Comments

[Tom]

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.