CSS line clamp

8th March, 2020 1 min. read

Today I’ve discovered this little CSS gem that allows very easily to truncate a paragraph with ellipsis according with the desired number of lines.

It’s unofficial but well supported, thus, use it wisely.

The relevan part are in this code:

<p>
  Some text
</p>
p{
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

A reactive demo here


Spotted a typo or (likely) a grammar error? Send a pull request.