javascript - 如何 chop 非环绕 HTML 表格单元格中的多余文本并以 "..."结尾

Question

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

我可以让它只从字段中导入一定数量的字符，但是，尝试决定某些内容是没有意义的，因为可以查看的设备的屏幕宽度变化很大(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。

Answer 1

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