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

Question

我有一个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。

Answer 1

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