小开

默认情况下，表格自动换行，所以确保表格单元格显示为table-cell:

td {
display: table-cell;
}

小开

虽然可能性不大，但请仔细检查Firebug(或类似)，确保您没有意外继承以下规则:

white-space:nowrap;

这可能会覆盖指定的换行行为。

小开

结果是没有好的方法来做这个。我最接近的是添加“溢出:隐藏”;到表格周围的div并丢失文本。真正的解决办法似乎是抛弃餐桌。使用divs和相对定位，我能够达到同样的效果，减去<table>

的遗留

这是给那些像我一样想要这个答案的人的。经过6年的努力，感谢所有贡献者。

* { /* this works for all but td */
word-wrap:break-word;
}


table { /* this somehow makes it work for td */
table-layout:fixed;
width:100%;
}

小开

<td style="word-break:break-all;">longtextwithoutspace</td>

或

<span style="word-break:break-all;">longtextwithoutspace</span>

小开

下面是我在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>

当文本有一些空格时，它将不那么好。

<td style="word-break:break-all;">long text with andthenlongerwithoutspaces</td>

如果单词andthenlongerwithoutspaces适合在一行中放入表格单元格，而long text with andthenlongerwithoutspaces不适合，那么长单词将被分成两部分，而不是被换行。

插入U+200B (ZWSP)， U+00AD (软连字符) 或U+200C (ZWNJ)在每个长单词后面，比如说，第20个字符(但是，见下面的警告):

td {
border: 1px solid;
}

<table style="width: 100%;">
<tr>
<td>
<div style="word-wrap: break-word;">
Looooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;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。

小开

如前所述，将文本放在div中几乎可以工作。你只需要指定div中的width，这对于静态布局来说是幸运的。

这适用于FF 3.6, IE 8, Chrome。

<td>
<div style="width: 442px; word-wrap: break-word">
<!-- Long Content Here-->
</div>
</td>

小开

<p style="overflow:hidden; width:200px; word-wrap:break-word;">longtexthere<p>

小开

看看这个演示

   <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>

这里是读的链接

小开

在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中添加width: 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>，这取决于你想要实现的布局。

例如:

<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>

小开

看起来你需要在块元素(div)上设置word-wrap:break-word;，具有指定的(非相对)宽度。例:

<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。

小开

一个解决方案，工作与谷歌Chrome和Firefox(未测试与Internet Explorer)是设置display: table-cell作为块元素。

小开

我找到了一个解决方案，似乎可以在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浏览器的故障。

小开

获得奖励的答案是正确的，但如果表有一个合并/连接单元格的第一行(所有单元格获得相同的宽度)，它就不起作用。

在这种情况下，你应该使用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>

小开

这对我来说很管用:

<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>

小开

风格= "表布局:固定;宽度: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上测试

小开

如果你不需要表格边框，应用这个:

table{
table-layout:fixed;
border-collapse:collapse;
}
td{
word-wrap: break-word;
}

小开

更改代码

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>

小开

工作区，使用溢出包装和工作正常表布局+表宽度100%

https://jsfiddle.net/krf0v6pw/

超文本标记语言

<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测试

小开

如果适合你，你可以试试……

把一个文本区域在你的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>

小开

我有同样的问题，这个工作对我来说很好

 <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>

小开

只要增加宽度。这对我很管用。

     <td style="width:10%;"><strong>Item Name</strong></td>

小开

我已经尽力了，但对我来说就是这样

white-space: pre-wrap;
word-wrap: break-word;

小开

这里常见的令人困惑的问题是我们有2个不同的css属性:word-wrap和word-break。然后在此之上，换行有一个选项称为break-word..容易混淆:-)

通常这对我来说是可行的，即使是在表中: # EYZ0 < / p >

小开

如果你只关心文本，你可以不使用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>

小开

这可能会有帮助，

css

.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>

小开

我也遇到过类似的问题。我在一个AngularJS应用程序的Bootstrap模式中有一个表。当我更改表上的过滤器，并且在相关单元格中出现长值时，文本将溢出到单元格之外和模态之外。这个CSS最终解决了这个问题，应用到TD上:

style="white-space:pre-wrap; word-break:break-word"

这使得值即使在更改表内容时也能正确地换行。

HTML表中的换行

工作区，使用溢出包装和工作正常表布局+表宽度100%

css