太长时动态缩短/隐藏/覆盖表格单元格中的文本答案

【问题标题】：Dynamically shorten/hide/overlap tekst in table cells when too long太长时动态缩短/隐藏/覆盖表格单元格中的文本
【发布时间】：2017-06-06 04:09:45
【问题描述】：

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

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

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

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

【问题讨论】：

【解决方案1】：

1.缩短原始数据

我建议您考虑比在第 65 个字符处截断字符串更优雅的方法。 -- 相反，寻找空格来打破字符串。如果没有找到空格，则只砍掉中间词。

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

2。在悬停时显示原始数据

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

【讨论】：

工具提示是我的第一个想法，但我宁愿不要在文件中添加一堆额外的 JavaScript 代码，因为我希望文件大小尽可能小。至于做空，我想要一个重叠的解决方案。我发现用<div style='overflow: auto; white-space: nowrap'></div> 包围文本可以部分解决它，但我想避免滚动。相反，其余文本应该出现在悬停时，就像工具提示一样。

【解决方案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; }

这将迫使浏览器使用 other 表算法，它不会尝试适应许多情况，包括尴尬的情况，而是坚持样式表所说的内容。

【讨论】：