-1

I have been trying to do a line clamp with 2 lines for a certain div container in my email but I'm unable to do it using pure CSS.

Basically, this is what I'm trying to achieve:

With one line, it should not have an ellipsis:

This is a single line of text of content

With multi-line, when the text is long, it should stick to 2 lines and add an ellipsis:

This a multiple line of text of content.
Here is the second line where it should ...

Is there any way to do this using only CSS?

Roy
  • 7,811
  • 4
  • 24
  • 47
Joshua
  • 1
  • 2
  • 1
    Most if not ALL email clients do not support clamping. - https://www.campaignmonitor.com/css/ – Paulie_D Jan 08 '21 at 10:47
  • Does this answer your question? [css ellipsis on second line](https://stackoverflow.com/questions/5269713/css-ellipsis-on-second-line) – MaxiGui May 31 '22 at 10:21

1 Answers1

0

HTML Email generally has very limited support for for fancy CSS.

Test code (from MDN):

<p style="width: 300px;  display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-line-clamp: 3;  overflow: hidden;">
  In this example the <code>-webkit-line-clamp</code> property is set to <code>3</code>, which means the text is clamped after three lines.
  An ellipsis will be shown at the point where the text is clamped.
</p>

I tested this on Litmus and found these email clients supported -webkit-line-clamp: Apple Mail (macOS), iPhone (iOS 14.2), Samsung (Android 7).

It does NOT work on the following: Outlook Android or iOS, Outlook desktops, Gmail Android or iOS, Gmail desktops, Office/Outlook.com, Yahoo

text-overflow has slightly better support: https://www.caniemail.com/features/css-text-overflow/

But your best bet is to do it manually (i.e. put the dots in yourself).

Nathan
  • 4,358
  • 2
  • 10
  • 26