我有一张桌子，它的一个单元格中有一条长线。我需要拆分长线，以免表格宽度超过 100%。我发现通过添加table-layout: fixedand word-wrap: word-break，它将包裹长单元格。但是，使用的副作用table-layout是它会导致所有列具有相同的宽度。
你可以在这里看到一个例子：
如何使第一列的宽度自动调整大小以仅适合其内容？（即在本例中，它应该足够宽以显示该列中的1and 2。）
表中的数据将动态加载，因此硬编码宽度值的解决方案并不好，因为无法提前知道列的宽度。我唯一的选择是使用 a <table>，我不能使用 a<div>或其他一些元素。
根据官方规范，当你使用一个 fixedtable-layout时，第一行的列宽决定了整个表格的列宽。如果没有定义它们，它将均匀分布列宽。
由于似乎没有任何其他选择，我最终使用了以下方法：
table-layout在设置为自动时加载表中的数据。table-layout为固定。这是一个不完美的例子（宽度会减少一点）：
我在解决同样的问题时发现了这一点：
在元素上设置断词完全对应于在该元素内包含的文本的每个字符之间插入一个零宽度空格。
除了这实际上适用于普通的动态表！
这个解决方案非常快，因为它不需要任何 Javascript。
（但是，如果需要，它可以从 Javascript 中使用。查找所有带有断词的单元格，获取所有子文本节点，并在每个字符之间插入一个零宽度的空格。即使这样，脚本在页面加载期间也只会运行一次，所以这应该仍然非常高效。）
零宽度空间是​
你可以使用：word-wrap css style 来打断长句。
word-wrap: break-word
在DIV和固定表（table-layout:fixed ）中处理/包装长词很容易- 只需应用 CSS3 word-wrap:break-words。
在上面的动态表中，属性只完成了一半的工作。我们还需要帮助浏览器找到断点。
可以在文章Wrap long words within dynamic tables中找到更详细的解释。