0

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

问题:一列的宽度为 140 像素。这一列中的大多数句子都很短,适合这个宽度。字体不是等宽的。有几个长句子,td 有 2 行,行高变得大于 20px。

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

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

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

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

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

4

3 回答 3

2

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

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

于 2013-01-15T15:34:41.997 回答
1

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

table { table-layout:fixed; }
table td, table th { white-space:nowrap; overflow:none; }
于 2013-01-15T15:36:25.090 回答
1

设置单元格的高度然后使用 text-overflow: ellipsis 怎么样?

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

编辑:固定小提琴 - 这是一个例子: JSFiddle - td and ellipsis

于 2013-01-15T15:38:16.723 回答