Multi line overflow ellipsis with CSS

Aug 3, 2016 2 minute read

We all (should) know by now that adding an ellipsis overflow to a text element is not effective content strate… However, it still makes sense to use this technique on some UI elements. Whether or not it is sensible to apply this technique to your content, it’s up to you.

Technically, here’s what we’ll achieve:

Notice how the “…” is in the third line of the text.

Achieving this one a single line of text has been possible for many years now, using a combination of text-overflow: ellipsis and max-width. But what if we want to have the ... on the second, maybe third line of a paragraph? This is easy to hack with JavaScript, truncating it to a maximum number of characters. But it should be possible with CSS alone.

Webkit to the rescue

Bear in mind that this solution is only available for Webkit browsers at the moment. It relies on the line-clamp property which almost does the work by itself, but there’s a few other gotchas to consider.

How can we do this?

.list__item p {
  display: inline-block; // for non Webkit browsers
  display: -webkit-box;  // needed for the effect to cut off
  -webkit-line-clamp: 3;  // line to cut off
  -webkit-box-orient: vertical;
}

.list__item:hover p {
  display: inline-block; // show the whole thing
}

Notice that line-clamp only works when -webkit-box is applied to the same element.

Gotchas

Apart from working only on Webkit, you may need to play around with the line-height or max-height of your text if there’s padding around it. There’s a chance that the text will cut off while still displaying a little bit of the next line, so it requires a little bit of manual fine-tuning.

Here’s the full pen:

See the Pen qNrRov by Ricardo Magalhães (@magalhini) on CodePen.