如何截断非包装HTML表单元格中多余的文本并以“…”结尾&”;

How to truncate excess text in non-wrapping HTML table cell and end with "..."

本文关键字：文本 结尾 包装 何截断 HTML 表单 多余 单元格      更新时间：2023-09-26

我有一个HTML模板，其中进入<td>标记的文本将从数据库字段导入。文本的长度可以是3到200个字符，其中的<td>是屏幕宽度的100%。如果文本太长，无法适应屏幕的宽度，我希望它被截断并以"…"结尾

我可以让它只从字段中导入一定数量的字符，但是，由于可以在其上查看的设备的屏幕宽度变化很大（750到1920像素），因此尝试决定某些内容是没有意义的，因此它需要为该屏幕显示尽可能多的字符，但由于表行的高度需要固定，因此无法换行。

所以不是：

|Text within this cell is too long to fit in this|table cell

将成为

|Text within this cell is too long to fit in t...|

理想情况下，"…"应该是一个超链接（因为还有另一个页面上有完整的文本。）

Javascript解决方案是可以的，但如果可能的话，首选CSS/HTML5。

您可以使用CSS属性text-overflow: ellipsis。虽然插入的省略号不能用作链接，但您可以添加一个"阅读更多"链接来完成此操作。

相关文章：