Question

I have an HTML email (with the following HTML in it) to be sent to our user base, the email sends correctly.

I have some lines that are very long, and the text needs to fit in a fixed layout and text longer than 3 lines needs to be truncated.

Is there any way to truncate text in HTML? I try to set overflow: hidden but it does not truncate the long line.

<td valign="top" height="85"  style="padding:0">
  <p style=" text-align:justify; height:85px; font-family: Verdana, Arial, Tahoma, sans-serif; overflow: hidden; font-size: 14px; vertical-align:text-top; margin: 0; padding:0; line-height:1.5; ">
  orem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor, arcu non porta scelerisque, ipsum turpis vestibulum quam, ut dapibus arcu purus quis nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris leo magna, aliquet quis facilisis convallis, pulvinar in lectus. Maecenas consequat elementum pretium. Donec venenatis tortor at sapien cursus eget lacinia lorem egestas. Praesent eget risus ut justo dapibus cursus. Mauris tincidunt euismod massa in pellentesque. Vivamus non scelerisque nisl.
  </p>
</td>
Was it helpful?

Solution

Use text-overflow instead:

  <p style="width: 50%; overflow: hidden; text-overflow: ellipsis;">The quick brown fox jumped over the lazy dog.</p>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top