Bending email CSS: ellipsis on multiline text

Over the last few months, more than once I encountered the need to hide parts of very long texts in cards and other types of components. So far, the front-end programmers here at the office had been using a mix of Javascript and CSS to achieve the desired effect when needed.

Using Javascript is a good solution because it allows us not only to hide parts of texts based on the width of its container, but to hide based on character count also.

But things got more complicated: it was necessary to hide parts of variable text in an email. This wasn’t just a matter of space. The objective was to encourage users to follow a link and find more about a problem they were invited to solve through mediation.

The first approach was trying to use images to cover the text, but this wasn’t working since position and margin are not supported by popular email clients.

After some research and thinking, this is the alternative found:

<strong>Descrição do caso</strong>
<span style="line-height: 1.5em; height: 4.5em; overflow: hidden; display: inline-block; max-width: 90%; text-align: justify; vertical-align:top;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibheuismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.

<span id="ellipsis" style="line-height: 1.5em; display: inline-block; vertical-align:top;">

<br /><br /> ...

The idea is to align two containers of text side by side, and limit their height using values multiple of 1.5em. That would be the same value of the line-height. Unifying line-height and height of the container eliminates the possibility of hiding the lower half of any line.

The first container would have a width of 90%, and the second only 10%. That is because the second would only be used for the ellipsis character. It is important to use text-align: justify on the first container to make sure the last showing line will always be close to the ellipsis on the other box, creating the illusion of a variable text being hidden or displayed according to the width of the viewport.

I tested this solution on Gmail, Hotmail, Yahoo and BOL (a Brazilian email client. Yahoo was the only one where it didn't work. Because of that, I added a media-query to hide the ellipsis only on Yahoo, without breaking the layout.

Here is how the layout looks on different email clients:

Sequence: Gmail, Hotmail, BOL and Yahoo

Just a couple of final notes:

1. Here are some the links that really helped me:

2. I know there are CSS4 properties that already do the multiline clamp, but they don’t work on most browsers yet, and they surely wouldn’t work on email clients.

Thanks for reading!