我一直在使用word-wrap: break-word在div和span中对文本进行换行。然而，它似乎在表格单元格中不起作用。我有一个设置为width:100%的表，有一行和两列。列中的文本虽然使用了上面的换行样式，但不能自动换行。它会导致文本超出单元格的边界。这发生在Firefox，谷歌Chrome和Internet Explorer上。
下面是源代码的样子:
td {
边框:1px实体;
L}
<table style="width: 100%;">
< tr >
< td >
< span style=" font - family:宋体;">
Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong词
< / div >
道明> < /
<span style=" font - family:宋体;">短字< / span > < / td >
< / tr >
表> < /
上面的长单词比我的页面的边界大，但它没有与上面的HTML中断。我尝试了以下添加文本换行:抑制和文本换行:正常的建议，但都没用。
唯一需要做的是根据你想要实现的布局，为<td>或<td>内的<div>添加宽度。
eg:
<table style="width: 100%;" border="1"><tr>
<td><div style="word-wrap: break-word; width: 100px;">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
<td><span style="display: inline;">Foo</span></td>
</tr></table>
or
<table style="width: 100%;" border="1"><tr>
<td width="100" ><div style="word-wrap: break-word; ">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
<td><span style="display: inline;">Foo</span></td>
</tr></table>
问题
<td style="word-break:break-all;">longtextwithoutspace</td>
当文本中有一些空格时，它将不那么好。
<td style="word-break:break-all;">long text with andthenlongerwithoutspaces</td>
如果没有空格的单词“然后再长”适合在一行中放入表格单元格，而没有空格的长文本“然后再长”则不行，那么长单词将被分解为两个，而不是被换行。
替代方案:插入U+200B (ZWSP)， U+00AD(软连字符)
或U+200C (ZWNJ)在每个长字后面，比如，第20个字符(然而，见下面的警告):
td {
边框:1px实体;
L}
<table style="width: 100%;">
< tr >
< td >
< span style=" font - family:宋体;">
Looooooooooooooooooo& # xAD; oooooooooooooooooooo& # xAD; oooooooooooooooooooo& # xAD; oooooooooooooooooooo& # xAD; oooooooooooooooooooo& # xAD; oooooooooooooooooooo& # xAD; oooooooooooooooooooo& # xAD; oooooooooooooooooooo& # xAD; oooooooooooooooooooo& # xAD; oooooooooooooong词
< / div >
道明> < /
<span style=" font - family:宋体;">短字< / span > < / td >
< / tr >
表> < /
警告:插入额外的零长度字符不会影响阅读。但是，它确实会影响复制到剪贴板中的文本(这些字符当然也会被复制)。如果剪贴板文本稍后在web应用程序的某些搜索功能中使用…搜索将会被打破。尽管这种解决方案可以在一些知名的web应用程序中看到，但尽可能避免。
警告:插入额外字符时，不应该在字素中分离多个代码点。更多信息请参见https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries。
风格= "表布局:固定;宽度:98%;自动换行:break-word”
<table bgcolor="white" id="dis" style="table-layout:fixed; width:98%; word-wrap:break-word" border="0" cellpadding="5" cellspacing="0" bordercolordark="white" bordercolorlight="white" >
演示- http://jsfiddle.net/Ne4BR/749/
这对我来说很有效。我有很长的链接，会导致在web浏览器上的表超过100%。
在IE, Chrome, Android和Safari上测试。
