CSS3 gave us the wonderful property, text-overflow, which can do things like create ellipsis and gracefully cut off words. However, text-overflow has a serious limitation: it only works on a single line of text.
What is the solution?
In order to fully understand why this pure CSS solution is so awesome, I want to run through a few of the alternatives and the problems with each.
- -Webkit-line-clamp property
To use -webkit-line-clamp, add the following to your CSS:
A Simple, Pure CSS Solution
Clearly none of these options are perfect. I wanted an easier and more bulletproof way to handle this, so I found that we can truncate text using two carefully placed CSS pseudo elements.
Here’s the full CSS. We’ll walk through the code below.
How It Works
Let’s imagine that we need to contain a block of text to a max of 3 lines. In order to do so, we have to handle the following cases:
1. The text is more than 3 lines
2. The text is less than 3 lines
3. The text is exactly 3 lines