文字包装长桌单元格，同时保持动态宽度

Question

我有一个桌子，其中一个单元格中有一条长线。我需要分开长线，以免使桌子宽度超过100％。我通过添加 table-layout: fixed 和 word-wrap: word-break, ，它将包裹长单元。但是，使用的副作用 table-layout 是使所有列具有相同的宽度。

您可以在这里看到一个示例：

http://jsfiddle.net/rydld/2/

如何使第一列的宽度自动尺寸仅适合其内容？ （即在此示例中，它应该足够宽，以显示 1 和 2 在该列中。）

表中的数据将动态加载，因此硬码宽度值不好的解决方案，因为没有办法提前知道列的宽度。我唯一的选择是使用 <table>, ，我不能使用 <div> 或其他一些元素。

Answer 1

根据 官方规格, ，当您使用固定 table-layout, ，第一行的列宽确定整个表的列宽度。如果未定义它们，它将均匀地分布列宽度。

由于似乎没有其他选择，我最终使用以下方法：

1. 将数据加载到表中时 table-layout 设置为自动。
2. 阅读我想动态的列的宽度。
3. 将这些列宽度设置为其当前值。
4. 更改 table-layout 修复。

这是一个不完美的示例（宽度会稍微降低）：

http://jsfiddle.net/rydld/7/

Answer 2

我在遇到同样的问题时发现了这一点：

设置元素上的断开字完全对应于该元素内部包含的文本的每个字符之间插入零宽的空间。

除了这实际上可以与普通的动态表配合使用！

该解决方案非常快，因为它不需要任何JavaScript。

（但是，如果需要，可以从JavaScript中使用。找到所有带有断开字的单元格，抓住所有子文本节点，并在每个字符之间插入一个零宽的空间。即使这样，该脚本在页面加载期间只能运行一次，因此，这仍然应该表现出色。）

零宽的空间为 ​

Answer 3

您可以使用：Word-bap css样式破坏了长句子。

word-wrap: break-word

Answer 4

很容易处理/包裹长话 div沙 固定表 (桌面：修复） - 只需应用CSS3 单词包：断开字.

内 动态表 上面的财产只能完成一半的工作。我们还需要帮助浏览器找到突破点。

可以在文章中找到一些更详细的解释 在动态表中包裹长词.