HTML表中的自动换行

我一直在使用word-wrap: break-word将文本div和span 。但是，它似乎在表单元格中不起作用。我有一个表设置为width:100% ，有一行和两列。列中的文本尽管使用上述word-wrap样式设置，但不会自动换行。它导致文本超出单元格的边界。这发生在Firefox，Google Chrome和Internet Explorer上。

来源如下所示：

 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 ，但是都没有帮助。

#1楼

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

td {
   display: table-cell;
}

#2楼

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

white-space:nowrap;

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

#3楼

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

#4楼

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

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

#5楼

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

要么

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

#6楼

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

#7楼

这对我有用：

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

#8楼

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上进行了测试。

#9楼

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

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

#10楼

更改您的代码

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>

#11楼

使用溢出包装并与正常的表格布局+表格宽度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需要table-layout:fixed 。使用常规的自动调整大小。
不需要以像素为单位定义固定width或max-width 。如果需要，定义父级的% 。

已在FF57，Chrome62，IE11，Safari11中测试

#12楼

问题

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

替代解决方案：在每个第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 。

#13楼

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

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

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

#14楼

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

#15楼

看看这个演示

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

这是阅读链接

#16楼

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

#17楼

需要做的唯一的事情就是增加宽度与<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>

#18楼

看来您需要设置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>

或按照Abhishek Simon的建议使用word-break:break-all 。

#19楼

与Google Chrome和Firefox一起使用的解决方案（未经Internet Explorer测试）是将display: table-cell为一个块元素。

#20楼

我发现了一个似乎可以在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浏览器。

asdfgh0077

发布了0 篇原创文章 · 获赞 1 · 访问量 2542

私信关注