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>
box-sizing: border-box; <--I usually set this globally
padding: 0 5px;
/the rest of these are just for demo purposes/
top: 2.4em; right: 5px;
background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 50%, #fff);
Head on over to codepen to view.
Who reading this votes that CSS should give us a multi-line ellipses property?