and talk about it….

Multi-line ellipses with max-height

If you have a fixed height on a text area, the options for multi-line ellipses are a little complex – a javascript solution, or this float-drop solution.

But what if you are using max-height?

Turns out the solution is easier!* You just need to absolutely position an ellipses pseudo element at max-height minus the height of the ellipses from the top (eyeballed, I didn’t set a height on the ellipses when I tried this, but you could). And they won’t show if you your content doesn’t reach the max-height you set on the element.

Here’s the code:

<div class="content">This is some shorter content.</div>

<div class="content">This is some longer content. See the ellipses? There they are, in the bottom right-hand corner.</div>