Question

我的表具有静态宽度值，但有时某列的表格单元格可能包含太长的文本，这会占用表格的宽度。我正在寻找一种动态缩短文本的方法（类似于表格网格功能，但之后没有网格），因为它可以是一个可变长度，当一个悬停在表格单元格上时，整个文本显示而不会拉伸表格

目前，我通过以下方式在我的脚本中对此进行了硬编码： string.substring(0, 65) + '...';并将全文传递给表格单元格的'title'属性。

请注意，我不想继续使用'title'属性。当由悬停事件触发时，我尝试使用<span style='position: absolute; background: #EEE'></span>围绕文本，但不幸的是，这不是一个吸引人的解决方案，因为文本移动了一点，而填充和边距样式都被更改。

解决方案也可以是jQuery插件或JavaScript脚本。

Answer 1

<强> 1。缩短原始数据

我建议你考虑比第65个字符的字符串更优雅的东西。 - 相反，寻找空格来打破字符串。如果没有找到空格，只切中间字。

要在表格单元格中保存更多空间，请使用省略号字符...而不是三个句点...只需从此答案中复制/粘贴即可。椭圆字符也可以使用不同或更小的字体设置样式。

<强> 2。显示悬停时的原始数据

我更喜欢YUI。他们的tooltip小部件适用于此。 example.

Answer 2

你应该尝试这个CSS指令：

td { break-word: word-wrap; }

适用于许多浏览器（是的，包括IE 6，甚至是IE 5.5，但不是Fx 3.0。它只能通过Fx3.5 +识别。也适用于Saf，Chr和Op但我不知道确切的版本这些）并且不会对其他人造成任何伤害。

如果桌子的宽度仍然混乱，还有：

table { table-layout: fixed; }
th, td { width: some_value; }

这将强制浏览器使用其他表格算法，它不会尝试适应许多情况，包括笨拙的情况，但坚持样式表所说的内容。