HTML表中的自动换行

You can try this if it suits you...

Put a textarea inside your td and disable it with background color white and define its number of rows.

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

A solution which work with Google Chrome and Firefox (not tested with Internet Explorer) is to set display: table-cell as a block element.

Tables wrap by default, so make sure the display of the table cells are table-cell:

td {
   display: table-cell;
}

If you do not need a table border, apply this:

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

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

Demo - http://jsfiddle.net/Ne4BR/749/

This worked great for me. I had long links that would cause the table to exceed 100% on web browsers. Tested on IE, Chrome, Android and Safari.

这对我有用：

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

似乎您需要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>

或使用word-break:break-allAbhishek Simon的建议。

赢得赏金的答案是正确的，但如果表的第一行具有合并/联接的单元格（所有单元格的宽度相等），则该答案将无效。

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

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

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

唯一需要做的就是根据要实现的布局，在<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>

查看这个演示

   <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="word-break:break-all;">longtextwithoutspace</td>

是当文本有一些空格时，它的工作效果不是很好，例如

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

如果单词andthenlongerwithoutspaces在一行中适合表格单元格，但long text with andthenlongerwithoutspaces不适合，则长单词将一分为二，而不是被换行。

Alternative solution: insert U+200B (ZWSP), U+00AD (soft hyphen) or U+200C (ZWNJ) in every long word after every, say, 20th character (however, see warning below):

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>

Warning: inserting additional, zero-length characters does not affect reading. However, it does affect text copied into clipboard (these characters are of course copied as well). If the clipboard text is later used in some search function in the web app... search is going to be broken. Although this solution can be seen in some well known web applications, avoid if possible.

Warning: when inserting additional characters, you should not separate multiple code points within grapheme. See https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries for more info.

更改您的代码

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/

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

如前所述，将文本放在div几乎可行的范围内。你只需要指定width的div，这是幸运，布局这是静态的。

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

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

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

要么

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

事实证明，没有做到这一点的好方法。我最接近的是添加“ overflow：hidden;”。到表格周围的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%;
}

远射，但请仔细检查Firebug（或类似工具），以确保您没有意外继承以下规则：

white-space:nowrap;

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

以下内容适用于Internet Explorer。注意table-layout:fixedCSS属性的添加

td {
  border: 1px solid;
}

<table style="table-layout: fixed; width: 100%">
  <tr>
    <td style="word-wrap: break-word">
      LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
    </td>
  </tr>
</table>