How to truncate text in HTML

html html-email truncation
Daniela picture Daniela · Apr 22, 2013 · Viewed 15.3k times · Source

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>

Answer

Paul Sweatte picture Paul Sweatte · Dec 5, 2013

Use text-overflow instead:

  <p style="width: 50%; overflow: hidden; text-overflow: ellipsis;">The quick brown fox jumped over the lazy dog.</p>

Related questions

Color a table row with style="color:#fff" for displaying in an email

We would like to display order details as table in an email ​<table> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</…

Read More
HTML5 Email Input Pattern Attribute

I’m trying to make a html5 form that contains one email input, one check box input, and one submit input. I'm trying to use the pattern attribute for the email input but I don't know what to place in …

Read More
Best practices for styling HTML emails

I'm designing an HTML template for an email newsletter. I've learned that many email clients ignore linked stylesheets, and many others (including Gmail) ignore CSS block declarations altogether. Are inline style attributes my only choice? What are the best practices …

Read More