Question

我正在使用jQuery开发一个Web应用程序。我有一个固定宽度列的表，以及javascript填充的行内容。

问题：一列的宽度为140px。此列中的大多数句子都很短并且符合此宽度。字体不是等宽字体。有一些长句，并且td有2行和高度该行变得大于20px。

我不希望这种情况发生，所以我必须缩短长句

我的第一个想法是用td填充td，然后不久检查td或行的高度。当高度大于20px时，我必须缩短句子。

但我认为当行获取值时，这会导致表行“闪烁”。

所以另一个想法是制作一个不可见的div或span并执行与之前描述的相同的操作。

有没有人之前做过这个并为我的问题找到了一个很好的解决方案？

Answer 1

没有办法计算文本的大小 - 或者至少没有可移植的方式。您甚至无法确定将使用哪种字体。

您可能会使用CSS来强制td固定大小并忽略所有溢出的文本。 overflow: hidden应该让你去。可能也想使用white-space: nowrap。

Answer 2

您可以使用CSS阻止调整大小：

table { table-layout:fixed; }
table td, table th { white-space:nowrap; overflow:none; }

Answer 3

如何设置单元格的高度，然后使用文本溢出：省略号？

table td { text-overflow: ellipsis; max-height: 20px; }

编辑：修复小提琴 - 这是一个例子： JSFiddle - td and ellipsis