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?
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?
line-clamp only works when
-webkit-box is applied to the same element.
Apart from working only on Webkit, you may need to play around with the
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.