如何截断非换行 HTML 表格单元格中的多余文本并以“...”结尾答案

【问题标题】：How to truncate excess text in non-wrapping HTML table cell and end with "..."如何截断非换行 HTML 表格单元格中的多余文本并以“...”结尾
【发布时间】：2013-06-24 00:12:07
【问题描述】：

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

【问题讨论】：

脚本解决方案可能类似于查看空单元格的大小，然后将文本添加到不换行的 div 以查看它是否更大。如果是这样，请减少字符数，直到它至少比省略号的宽度小。然后用省略号替换多余的文本，省略号是指向全文的链接。不过，使用 panpiper 的答案可能更容易。 :-)

标签： javascript css html

【解决方案1】：

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

【讨论】：

这个解决方案让我如释重负！开始担心这是不可能的..
意识到我在网上看到的例子只显示了 div 省略号，后来我发现这些也不适用于 td 标签。我找到了一个解决方案（更多代码），稍后我将发布。为了让椭圆起作用，还需要准备其他一些东西。