在HTML表格中换行
我一直在使用word-wrap: break-word来包装div和span的文本。 但是，它似乎不能在表格单元格中工作。 我有一个表设置为width:100% ，一行两列。 尽pipe上面的word-wrap样式，列中的文本不包装。 它导致文本超过单元格的边界。 这发生在Firefox，Google Chrome和Internet Explorer上。
以下是源代码的样子：
td { border: 1px solid; }
<table style="width: 100%;"> <tr> <td align="left"> <div style="word-wrap: break-word;">Long Content</div> </td> <td align="right"><span style="display: inline;">Short Content</span> </td> </tr> </table>
“长内容”大于我的页面的边界，但它不会与上述的HTML中断。 我已经尝试了下面的build议添加text-wrap:suppress和text-wrap:normal ，但都没有帮助。
以下在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>
<td style="word-break:break-all;">longtextwithoutspace</td>
要么
<span style="word-break:break-all;">longtextwithoutspace</span>
一个远射，但仔细检查与Firebug （或类似），你不是不小心inheritance了以下规则：
white-space:nowrap;
这可能会覆盖您指定的换行符。
结果是没有好办法做到这一点。 我最接近的是添加“溢出：隐藏” 到桌子周围的div并丢失文本。 真正的解决scheme似乎是沟表。 使用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%; }
如上所述，将文本放在div几乎可以工作。 你只需要指定div的width ，这是幸运的静态布局。
这适用于FF 3.6，IE 8，Chrome。
<td> <div style="width: 442px; word-wrap: break-word"> <!-- Long Content Here--> </div> </td>
改变你的代码
word-wrap: break-word;
至
word-break:break-all;
例
<table style="width: 100%;"> <tr> <td align="left"> <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 align="right"><span style="display: inline;">Short Content</span> </td> </tr> </table>
问题与
<td style="word-break:break-all;">longtextwithoutspace</td>
当文本有一些空格时，它会工作得不是很好，例如
<td style="word-break:break-all;">long text with andthenlongerwithoutspaces</td>
如果单词和单词的andthenlongerwithoutspaces在一行中适合表格单元格，而long text with andthenlongerwithoutspaces不long text with andthenlongerwithoutspaces长单词分成两列，而不是被打包。
替代解决scheme：每20个字符之后在每个长字中插入U + 200B（ ZWSP ），U + 00AD（ 软连字符 ）或U + 200C（ ZWNJ ）。
看看这个演示
<table style="width: 100%;"> <tr> <td align="left"><div style="word-break:break-all;">LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord</div> </td> <td align="right"> <span style="display: inline;">Foo</span> </td> </tr> </table>
这里是链接阅读
来自http://www.w3.org/TR/css3-text/#word-wrap的文本;
此属性指定UA是否可能在一个单词内部中断，以防止当其他不可破解的string太长而不能放入该行框中时发生溢出。 它只有在“文本换行”是“正常”或“压制”时才有效果。 可能的值
在IE 8和Chrome 13上testing
<table style="table-layout: fixed; width: 100%"> <tr> <td align="left"> <div style="word-wrap: break-word;"> longtexthere </div> </td> <td align="right"><span style="display: inline;">Foo</span></td> </tr> </table>
这会导致表格适合页面的宽度，每列占据宽度的50％。
如果您希望第一列占据更多页面，请在以下示例中添加width: 80% ，将80％replace为您select的百分比。
<table style="table-layout: fixed; width: 100%"> <tr> <td align="left" style="width:80%"> <div style="word-wrap: break-word;"> longtexthere </div> </td> <td align="right"><span style="display: inline;">Foo</span></td> </tr> </table>
唯一需要做的是在<td> <div>内部的<td>或<div>添加宽度，具体取决于您想要实现的布局。
例如：
<table style="width: 100%;" border="1"><tr> <td align="left" ><div style="word-wrap: break-word; width: 100px;">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td> <td align="right"><span style="display: inline;">Foo</span></td> </tr></table>
要么
<table style="width: 100%;" border="1"><tr> <td align="left" width="100" ><div style="word-wrap: break-word; ">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td> <td align="right"><span style="display: inline;">Foo</span></td> </tr></table>
<p style="overflow:hidden; width:200px; word-wrap:break-word;">longtexthere<p>
看来你需要设置word-wrap:break-word; 在一个块元素（ div ）上，指定（非相对）宽度。 例如：
<table style="width: 100%;"><tr> <td align="left"><div style="display:block; word-wrap: break-word; width: 40em;">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word</div></td> <td align="right"><span style="display: inline;">Foo</span></td> </tr></table>
或者使用word-break:break-all按照阿比舍克·西蒙的build议word-break:break-all 。
赢得赏金的答案是正确的，但如果表格的第一行有合并/连接的单元格 （所有单元格的宽度相等），则不起作用。
在这种情况下，您应该使用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>
表默认情况下，所以确保表单元格的显示是table-cell ：
td { display: table-cell; }
对于缺less可运行的代码片段：
没有风格
td { border: 1px solid gold; }
<table> <tr> <td> LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord </td> </tr> </table>
如果你不需要一个表格边框，应用这个：
table{ table-layout:fixed; border-collapse:collapse; } td{ word-wrap: break-word; }
这适用于我：
<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>
我发现了一个似乎可以在Firefox，Google Chrome和Internet Explorer 7-9上运行的解决scheme。 在一边做长文本的两列表布局。 我search了所有类似的问题，而在一个浏览器中发生了什么事情打破了另一个，或者添加更多的标签到表格就好像是坏的编码。
我没有使用这个表。 DL DT DD来救援。 至less对于固定一个双列布局，这基本上是一个词汇表/字典/字的意思设置。
<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浏览器。
style =“table-layout：fixed; width：98％; word-wrap：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/
这对我很好。 我有很长的链接，会导致表在浏览器上超过100％。 在IE，Chrome，Android和Safari上testing。
鲍比
与Google Chrome和Firefox（未经Internet Explorertesting）协同工作的解决scheme是将display: table-cell为块元素。
