过长时，动态缩短/隐藏/重叠表格单元格中的tekst

Question

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

目前，我在我的脚本中以下列方式硬编码： string.substring(0, 65) + '...';并将全文传递给表格单元格的'标题'属性。

请注意，我不想继续使用“标题”属性。在悬停事件触发时，我尝试围绕文本<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; } 

，这将迫使浏览器使用其他表算法，在一个地方不会尝试去适应很多情况下，包括尴尬的，但坚持样式表说。