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>

.content {
box-sizing: border-box; <--I usually set this globally
position: relative;
max-height: 3.75em;
overflow: hidden;
padding: 0 5px;
/the rest of these are just for demo purposes/
float: left;
width: 200px;
margin-right: 50px;
}

.content:after {
content: "\02026";
position: absolute;
top: 2.4em; right: 5px;
width: 3em;
background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 50%, #fff);
text-align: right;
}

Head on over to codepen to view.

*There is one use case where this falls apart, and that is if your content height exactly matches the max-height. This might be enough of an issue that you’d want to go with a javascript solution. 

Who reading this votes that CSS should give us a multi-line ellipses property?