我一直在使用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中断。我尝试了以下添加文本换行:抑制和文本换行:正常的建议,但都没用。


当前回答

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

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

其他回答

工作区,使用溢出包装和工作正常表布局+表宽度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测试

如前所述,将文本放在div中几乎是可行的。你只需要指定div的宽度,这对于静态布局来说是幸运的。

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

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

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

在这种情况下,你应该使用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 style="width: 100%;"> <tr> <td><div style="word-break:break-all;">LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord</div> </td> <td> <span style="display: inline;">Foo</span> </td> </tr> </table>

这里是阅读链接

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

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