HTML表中的自动换行

我一直在用s和s word-wrap: break-word包装文字。但是，它似乎在表单元格中不起作用。我将表设置为，其中包含一行和两列。列中的文本尽管具有上述样式，但不会自动换行。它导致文本超出单元格的边界。在Firefox，Google Chrome和Internet Explorer上会发生这种情况。divspanwidth:100%word-wrap

来源如下所示：

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，但均无济于事。

以下内容适用于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>

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

要么

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

远射，但与Firebug（或类似工具）仔细检查，您不会意外继承以下规则：

white-space:nowrap;

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

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

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

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

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

使用溢出包装并与正常的表格布局+表格宽度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中测试

更改您的代码

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>

问题

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

是如果文本有一些空格，例如

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

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

替代解决方案：在每个第20个字符后的每个长字中插入U + 200B（ZWSP），U + 00AD（软连字符）或U + 200C（ZWNJ）（但是，请参见下面的警告）：

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。

查看这个演示

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

如果您希望第一列占据更多页面，请添加一个 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>

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

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

看来您需要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的建议。

这对我有用：

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

如果不需要表格边框，请执行以下操作：

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

我发现了一个似乎可以在Firefox，Google 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和Google Chrome）中有效，主要是试图在此处修复损坏的Internet Explorer浏览器。

默认情况下，表格会自动换行，因此请确保表格单元格的显示为table-cell：

td {
   display: table-cell;
}

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/

这对我来说很棒。我有很长的链接，这将导致该表在Web浏览器上超过100％。在IE，Chrome，Android和Safari上进行了测试。

可以将与Google Chrome和Firefox一起使用的解决方案（未经Internet Explorer测试）设置display: table-cell为阻止元素。

如果适合您，可以尝试一下...

在您的td内放置一个textarea，并用白色背景色将其禁用，并定义其行数。

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