我一直在使用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 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。
在IE 8和Chrome 13中测试。
<table style="table-layout: fixed; width: 100%">
<tr>
<td>
<div style="word-wrap: break-word;">
longtexthere
</div>
</td>
<td><span style="display: inline;">Foo</span></td>
</tr>
</table>
这使得表格适合页面的宽度，每一列占用50%的宽度。
如果您希望第一列占据页面的更多空间，可以添加一个宽度:td的80%，如下例所示，将80%替换为您选择的百分比。
<table style="table-layout: fixed; width: 100%">
<tr>
<td style="width:80%">
<div style="word-wrap: break-word;">
longtexthere
</div>
</td>
<td><span style="display: inline;">Foo</span></td>
</tr>
</table>
唯一需要做的是根据你想要实现的布局，为<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>
我找到了一个解决方案，似乎可以在Firefox，谷歌Chrome和Internet Explorer 7-9中工作。做一个两列表格布局，长文本在一边。我到处寻找类似的问题，在一个浏览器中工作的东西破坏了另一个浏览器，或者向表中添加更多标签似乎是糟糕的编码。
我没有使用表格。DL DT DD来拯救。至少对于修复两列布局来说，这基本上是一个术语表/字典/单词含义设置。
以及一些通用样式。
dl {
margin-bottom:50px;
}
dl dt {
background:#ccc;
color:#fff;
float:left;
font-weight:bold;
margin-right:10px;
padding:5px;
width:100px;
}
dl dd {
margin:2px 0;
padding:5px 0;
word-wrap:break-word;
margin-left:120px;
}
<dl>
<dt>test1</dt>
<dd>Fusce ultricies mi nec orci tempor sit amet</dd>
<dt>test2</dt>
<dd>Fusce ultricies</dd>
<dt>longest</dt>
<dd>
Loremipsumdolorsitametconsecteturadipingemipsumdolorsitametconsecteturaelit.Nulla
laoreet ante et turpis vulputate condimentum. In in elit nisl. Fusce ultricies
mi nec orci tempor sit amet luctus dui convallis. Fusce viverra rutrum ipsum,
in sagittis eros elementum eget. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per.
</dd>
</dl>
使用浮动换行和左距，我得到了我所需要的。只是想把这个分享给其他人，也许它会帮助那些有两列定义风格布局的人，在文字包装方面遇到麻烦。
我尝试在表格单元格中使用换行，但它只在Internet Explorer 9中工作(当然还有Firefox和谷歌Chrome)，主要是试图修复这里的Internet Explorer浏览器。
风格= "表布局:固定;宽度: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上测试。
工作区，使用溢出包装和工作正常表布局+表宽度100%
https://jsfiddle.net/krf0v6pw/
HTML
<table>
<tr>
<td class="overflow-wrap-hack">
<div class="content">
wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
</div>
</td>
</tr>
</table>
CSS
.content{
word-wrap:break-word; /*old browsers*/
overflow-wrap:break-word;
}
table{
width:100%; /*must be set (to any value)*/
}
.overflow-wrap-hack{
max-width:1px;
}
好处:
使用overflow-wrap:break-word而不是word-break:break-all。这样比较好，因为它首先尝试中断空格，只有当单词比它的容器大时才切断单词。
没有表格布局:需要修正。使用常规的自动调整大小。
不需要以像素为单位定义固定宽度或固定max-width。如果需要，定义父节点的%。
在FF57, Chrome62, IE11, Safari11测试
