HTML 表格中的自动换行

Question

我一直在使用word-wrap: break-word<\/code>将文本包装在div<\/code>和span<\/code> 。 但是，它似乎不适用于表格单元格。 我有一个设置为width:100%<\/code>的表格，有一行和两列。 列中的文本虽然使用上述word-wrap<\/code>样式设置，但不会换行。 它会导致文本超出单元格的边界。 这发生在 Firefox、Google Chrome 和 Internet Explorer 上。

源代码如下所示：

上面的长字大于我页面的范围，但它不会与上面的 HTML 中断。 我已经尝试了以下添加text-wrap:suppress<\/code>和text-wrap:normal<\/code> ，但都没有帮助。

Answer 1

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

Answer 2

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

或者

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

Answer 3

一个长镜头，但仔细检查Firebug （或类似的）你没有意外继承以下规则：

white-space:nowrap;

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

Answer 4

事实证明没有好的方法可以做到这一点。 我最接近的是添加“溢出：隐藏；” 到桌子周围的 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%;
}

Answer 5

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

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

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

Answer 6

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

Answer 7

有问题

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

是当文本有一些空格时它不会那么好用，例如

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

如果 word 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 应用程序中可以看到此解决方案，但请尽可能避免。

警告：插入附加字符时，不应在字素内分隔多个代码点。 有关更多信息，请参阅https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries 。

Answer 8

更改您的代码

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>

Answer 9

看看这个演示

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

这是阅读的链接

Answer 10

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

Answer 11

这方面还需要做唯一需要的就是添加宽度与<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>

Answer 12

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

Answer 13

赢得赏金的答案是正确的，但如果表格的第一行有一个合并/连接的单元格（所有单元格的宽度相等），它就不起作用。

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

Answer 14

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

Answer 15

我尝试了所有但在我的情况下只为我工作

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

Answer 16

这对我有用：

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

Answer 17

如果您不需要表格边框，请应用此：

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

Answer 18

这里常见的令人困惑的问题是我们有 2 个不同的 css 属性： word-wrap和word-break 。 然后最重要的是，自动换行有一个叫做break-word的选项..容易混淆:-)

通常这对我有用，即使在表格中也是如此： word-break: break-word;

Answer 19

我找到了一个似乎适用于 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 浏览器。

Answer 20

我有同样的问题，这对我来说很好用

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

Answer 21

这可能会有所帮助，

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>

Answer 22

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

td {
   display: table-cell;
}

Answer 23

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/

这对我很有用。 我有很长的链接，这会导致表格在网络浏览器上超过 100%。 在 IE、Chrome、Android 和 Safari 上测试。

Answer 24

适合你的可以试试这个。。。

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

Answer 25

只需增加宽度。 这对我有用。

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

Answer 26

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

Answer 27

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

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

这使得这些值即使在表格内容的更改中也能正确包装。

Answer 28

一个简单的解决方法是使用
每隔几句话就修剪一下。

"

Answer 29

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