Question

I have an HTML email I am building which has two requirements:

1. The width should be fluid up to a max width (i.e. use the max-width CSS property)
2. Any text longer than that max width must be truncated with ellipsis.

I tried using the following style but it doesn’t work on all email clients or most browsers (Chrome aside):

text-overflow: ellipsis; 
white-space: nowrap; 
overflow: hidden; 
max-width: 740px;

I know that in IE, you need to set a width on all elements that contain the element you truncate, but I tried using max-width and it doesn’t apply.

So is there a way to get this desired behavior, short of manually truncating the text to some set character limit?

Answer 1

Email clients are the bottom rung of the CSS compliance ladder. So don’t expect universal support for this. Things like even max-width may not be supported everywhere.

You may be better off embedding the ellipsis in the actual text.