我一直在使用word-wrap: break-word来处理div和span中的文字。但是，它似乎不适用于表格单元格。我有一个表设置为width:100%，有一行和两列。列中的文本虽然使用上面的word-wrap设置样式，但不会换行。它会使文本超出单元格的边界。这种情况发生在Firefox，谷歌浏览器和Internet Explorer上。
以下是源代码：
td {
border: 1px solid;
}<table style="width: 100%;">
<tr>
<td>
<div style="word-wrap: break-word;">
Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
</div>
</td>
<td><span style="display: inline;">Short word</span></td>
</tr>
</table>
上面的长词大于我的页面边界，但它不会破坏上面的HTML。我已经尝试了以下添加text-wrap:suppress和text-wrap:normal的建议，但都没有帮助。
答案 0 :(得分：589)
以下适用于Internet Explorer。请注意添加table-layout:fixed CSS属性
td {
border: 1px solid;
}<table style="table-layout: fixed; width: 100%">
<tr>
<td style="word-wrap: break-word">
LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
</td>
</tr>
</table>
答案 1 :(得分：143)
<td style="word-break:break-all;">longtextwithoutspace</td>
或
<span style="word-break:break-all;">longtextwithoutspace</span>
答案 2 :(得分：113)
答案 3 :(得分：43)
原来没有办法做到这一点。我最接近的是添加“溢出：隐藏;”到桌子周围的div并丢失文本。
真正的解决方案似乎是放弃了表。使用div和相对定位我能够达到相同的效果，减去<table>
2015更新：这适合像我这样想要这个答案的人。经过6年的努力，这要归功于所有的贡献者。
* { // this works for all but td
word-wrap:break-word;
}
table { // this somehow makes it work for td
table-layout:fixed;
width:100%;
}
答案 4 :(得分：28)
如上所述，将文本放在div内几乎可以正常工作。您只需指定width的{{1}}，这对于静态布局来说是幸运的。
适用于FF 3.6，IE 8，Chrome。
div答案 5 :(得分：18)
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。哪个更好，因为它首先尝试打破空格，并且只有当单词大于它的容器时才切断单词。table-layout:fixed。使用常规自动调整大小。width或固定max-width。如果需要，定义父级的%。在FF57，Chrome62，IE11，Safari11
中测试过答案 6 :(得分：17)
更改您的代码
word-wrap: break-word;
到
word-break:break-all;
实施例
<table style="width: 100%;">
<tr>
<td>
<div style="word-break:break-all;">longtextwithoutspacelongtextwithoutspace Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content</div>
</td>
<td><span style="display: inline;">Short Content</span>
</td>
</tr>
</table>
答案 7 :(得分：15)
的问题
<td style="word-break:break-all;">longtextwithoutspace</td>
当文本 某些空格时，它会工作得不那么好，例如
<td style="word-break:break-all;">long text with andthenlongerwithoutspaces</td>
如果单词andthenlongerwithoutspaces在一行中适合表格单元格但long text with andthenlongerwithoutspaces没有，则长单词将被分成两行，而不是被包裹。
替代解决方案：插入U + 200B（ZWSP），U + 00AD（soft hyphen） 或者每个长字后面的U + 200C（ZWNJ），比方说，第20个字符（但请参见下面的警告）：
td {
border: 1px solid;
}<table style="width: 100%;">
<tr>
<td>
<div style="word-wrap: break-word;">
Looooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooong word
</div>
</td>
<td><span style="display: inline;">Short word</span></td>
</tr>
</table>
警告：插入额外的零长度字符不会影响阅读。但是，它确实会影响复制到剪贴板中的文本（这些字符当然也会被复制）。如果剪贴板文本稍后在Web应用程序的某些搜索功能中使用...搜索将被破坏。尽管可以在一些众所周知的Web应用程序中看到此解决方案，但请尽可能避免。
警告：插入其他字符时，不应在字形中分隔多个代码点。有关详细信息，请参阅https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries。
答案 8 :(得分：10)
在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％。
如果您希望第一列占据更多页面，请在width: 80%中添加td，如以下示例所示，将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>
答案 9 :(得分：9)
<table style="width: 100%;">
<tr>
<td><div style="word-break:break-all;">LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord</div>
</td>
<td>
<span style="display: inline;">Foo</span>
</td>
</tr>
</table>
以下是read
的链接答案 10 :(得分：9)
唯一需要做的就是根据您想要实现的布局，为<td>或<div>内的<td>添加宽度。
例如：
<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>
或
<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>
答案 11 :(得分：8)
<p style="overflow:hidden; width:200px; word-wrap:break-word;">longtexthere<p>
答案 12 :(得分：8)
赢得赏金的答案是正确的，但是如果表的第一行有一个合并/连接的单元格（所有单元格的宽度相等），它就不起作用。
在这种情况下，您应该使用colgroup和col标记正确显示它：
<table style="table-layout: fixed; width: 200px">
<colgroup>
<col style="width: 30%;">
<col style="width: 70%;">
</colgroup>
<tr>
<td colspan="2">Merged cell</td>
</tr>
<tr>
<td style="word-wrap: break-word">VeryLongWordInThisCell</td>
<td style="word-wrap: break-word">Cell 2</td>
</tr>
</table>
答案 13 :(得分：7)
您似乎需要在块元素（word-wrap:break-word;）上设置div，并指定（非相对）宽度。例如：
<table style="width: 100%;"><tr>
<td><div style="display:block; word-wrap: break-word; width: 40em;">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word</div></td>
<td><span style="display: inline;">Foo</span></td>
</tr></table>
或根据Abhishek Simon的建议使用word-break:break-all。
答案 14 :(得分：5)
这对我有用：
<style type="text/css">
td {
/* CSS 3 */
white-space: -o-pre-wrap;
word-wrap: break-word;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
}
表格属性为：
table {
table-layout: fixed;
width: 100%
}
</style>
答案 15 :(得分：4)
如果您不需要表格边框，请应用此选项：
table{
table-layout:fixed;
border-collapse:collapse;
}
td{
word-wrap: break-word;
}
答案 16 :(得分：3)
我找到了一个似乎适用于Firefox，Google Chrome和Internet Explorer 7-9的解决方案。用于执行一列的长列文本的双列表格布局。我搜遍了类似的问题，在一个浏览器中工作的东西打破了另一个，或者在表格中添加更多标签似乎是不好的编码。
我没有使用表格。 DL DT DD来救援。至少对于修复两列布局，这基本上是词汇表/词典/单词意义设置。
<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>
还有一些通用样式。
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;
}
使用浮动自动换行和左边距，我得到了我所需要的。只是想我会与其他人分享这个，也许它会帮助其他人使用两列定义样式布局，但是无法将单词包装起来。
我尝试在表格单元格中使用自动换行，但它只适用于Internet Explorer 9（当然还有Firefox和Google Chrome），主要是尝试修复损坏的Internet Explorer浏览器。
答案 17 :(得分：3)
默认情况下表格换行，因此请确保表格单元格的显示为table-cell：
td {
display: table-cell;
}
答案 18 :(得分：2)
这里常见的令人困惑的问题是，我们有2个不同的CSS属性：word-wrap和word-break。
然后最重要的是，自动换行有一个名为break-word的选项。.易于混淆：-）
通常，即使在桌子内，这也对我有用：
word-break: break-word;
答案 19 :(得分：1)
风格=＆＃34;表格的布局：固定;宽度：98％;自动换行：断字＆＃34;
<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/
这对我很有用。我有很长的链接会导致表格在网络浏览器上超过100％。 在IE，Chrome，Android和Safari上进行测试。
答案 20 :(得分：1)
如果适合您可以尝试一下...
在您的td中放置一个文本区域，并用白色背景色将其禁用，并定义其行数。
<table style="width: 100%;">
<tr>
<td>
<textarea rows="4" style="background-color:white;border: none;" disabled> Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
</textarea>
</td>
<td><span style="display: inline;">Short word</span></td>
</tr>
</table>
答案 21 :(得分：1)
我有同样的问题，对我来说很好用
<style>
td{
word-break: break-word;
}
</style>
<table style="width: 100%;">
<tr>
<td>Loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word</td>
<td><span style="display: inline;">Short word</span></td>
</tr>
</table>
答案 22 :(得分：1)
我尽了一切，但就我而言，只是为我工作
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage('url'),
fit: BoxFit.cover,
),
),
),
答案 23 :(得分：0)
与Google Chrome和Firefox配合使用的解决方案（未经过Internet Explorer测试）是将display: table-cell设置为块元素。
答案 24 :(得分：0)
只需添加宽度。这对我有用。
<td style="width:10%;"><strong>Item Name</strong></td>
答案 25 :(得分：0)
如果你只关心文本，你可以不用 table-layout:fixed
<table>
<tr>
<td>
Title
</td>
<td>
Length
</td>
<td>
Action
</td>
</tr>
<tr>
<td>
Long song name
</td>
<td>
3:11
</td>
<td>
<button>
Buy Now!
</button>
</td>
</tr>
<tr>
<td colspan=3>
<div style='width:200px;background-color:lime;margin-left:20px'>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>quick </div>
<div style='float:left;white-space:pre'>brown </div>
<div style='float:left;white-space:pre'>foxed </div>
<div style='float:left;white-space:pre'>jumped </div>
<div style='float:left;white-space:pre'>over </div>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>lazy </div>
<div style='float:left;white-space:pre'>brown </div>
<div style='float:left;white-space:pre'>cat </div>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>the </div>
</div>
</td>
</tr>
<tr>
<td>
Long song name1
</td>
<td>
2:20
</td>
<td>
<button>
Buy Now!
</button>
</td>
</tr>
</table>
答案 26 :(得分：0)
这可能会有所帮助，
.wrap-me{
word-break: break-all !important;
}<table>
<thead>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
</tr>
</thead>
<tbody>
<tr> <td class="wrap-me">tesetonlywithoutspacetesetonlywithoutspacetesetonlywithoutspace</td>
<td class="wrap-me">test only</td>
<td class="wrap-me">test with space long text</td>
<td class="wrap-me">Col 4</td>
<td class="wrap-me">Col 5</td>
<td class="wrap-me">Col 6</td>
<td class="wrap-me">Col 7</td>
</tr>
<tr>
<td class="wrap-me">test only</td>
<td class="wrap-me">test only</td>
<td class="wrap-me">test with space long text</td>
<td class="wrap-me">testwithoutspacetestonlylongtext</td>
<td class="wrap-me">Col 5</td>
<td class="wrap-me">Col 6</td>
<td class="wrap-me">Col 7</td>
</tr>
</tbody>
</table>