How to truncate text in HTML

社会主义新天地 提交于 2020-07-03 04:23:39

问题


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>

回答1:


Use text-overflow instead:

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


来源:https://stackoverflow.com/questions/16150120/how-to-truncate-text-in-html

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!