【问题标题】：Word-wrap in an HTML tableHTML 表格中的自动换行
【发布时间】：2010-11-18 12:12:09
【问题描述】：

我一直在使用word-wrap: break-word 在divs 和spans 中换行。但是，它似乎不适用于表格单元格。我有一个设置为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 的建议，但都没有帮助。

【问题讨论】：

添加硬连字符。这是一个前言。
不幸的是，其中的文字来自用户生成的内容。当然，我可以对其进行预处理并添加连字符，但我希望有更好的方法。
我很抱歉使用了“硬连字符”这个词。在 HTML 中，普通连字符由“-”字符（- 或 -）表示。软连字符由字符实体引用表示。 ( 或 )
你真的在使用break-wor<em>k</em>吗？也许这与它有关。
如果你在这里，你可能还想看看white-space: pre-wrapdeveloper.mozilla.org/en-US/docs/Web/CSS/white-space

标签： html css html-table

【解决方案1】：

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

td {
   display: table-cell;
}

【讨论】：

-1; any HTML 元素中的文本默认换行，而不仅仅是表格。这里的建议没有任何意义。
这不是一个答案，应该远低于附加它的答案。

【解决方案2】：

很长一段时间，但请仔细检查 Firebug（或类似的）您没有意外继承以下规则：

white-space:nowrap;

This may override你指定的换行行为。

【讨论】：

这是继承的，为我打破了自动换行
@RickGrundy 如果你有这个问题，你会把它改成什么？
@cokedude 我来得太晚了，但它是white-space:normal;
这引起了我的问题。谢谢你的评论，很有帮助。
非常感谢，您节省了我的时间

【解决方案3】：

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

【讨论】：

对我来说很奇怪，当我删除评论 // this works for all but td 时，它起作用了。

【解决方案4】：

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

或

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

【讨论】：

可以确认 Pratik 的方法也适用于 iOS (iPhone) 上的 Safari。
要解决一些短字和长字的问题，您可能会预处理文本并在 <span> 中仅包装长字（例如，> 40 个字符）。
firefox、opera不支持这个
这不会优先中断非单词字符（例如，如果我有一系列用空格分隔的较短单词，它总是会将单词一直运行到该行，然后中断最后一个单词一半）。 Word-wrap 只会在必要时断词
这种方法更好，因为不需要table-layout: fixed;。

【解决方案5】：

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

【讨论】：

@ewomac 是的，有时我只需要忽略有关 HTML/CSS 的 VS2010 错误，如果我知道它可以在浏览器中运行。
@marc！！伙计，非常感谢。我的任务是构建一个使用表格的客户端站点的移动版本，但我无法让它工作！ table-layout:fixed 成功了！
这使得其他列太宽了。
请务必阅读developer.mozilla.org/en-US/docs/Web/CSS/table-layout 表格和列宽由表格和列元素的宽度或第一行单元格的宽度设置。后续行中的单元格不影响列宽。听起来这对性能也有好处。
@Clément 请参阅下面 Indrek 关于<colgroup> 的回答，它为我解决了这个问题。

【解决方案6】：

问题

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

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

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

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

替代方案：插入 U+200B (ZWSP), U+00AD (soft hyphen) 或 U+200C (ZWNJ) 在每个长字之后，例如第 20 个字符（但是，请参阅下面的警告）：

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 了解更多信息。

【讨论】：

如果在足够长的单词中，您在每个字符之后插入一个软连字符，这样的输出可能会稍微好一些，这样浏览器就可以可靠地在包含元素的右侧边缘。
虽然这是一个可行的解决方案，但如果您想以编程方式在你的服务器。在大多数编程语言中，遍历 Unicode 字符串的字符是很困难的。在最好的情况下，一种语言可以很容易地迭代 Unicode 码位，但这些不一定是我们想要称为“字符”的东西（例如，é 可以写成两个代码点）。我们可能真的是指“字形”，但我不知道任何语言可以让循环遍历这些语言变得微不足道。
@MarkAmery 你是对的。但是，即使使用纯 ASCII，这也不是很好。我添加了“警告”。

【解决方案7】：

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

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

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

【讨论】：

您可以添加min-width: 100% 和width 以确保div 占据整个单元格。
我想用逗号 (,) 进行自动换行。喜欢Long,Long,Long,Long,Long。我想在任何逗号 (,) 之后将其包装起来。

【解决方案8】：

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

【讨论】：

-1 因为缺乏任何解释和糟糕的解决方案。将内容放在没有具有固定像素宽度的表格单元格中的固定像素宽度 p 中几乎肯定会导致 p 溢出或无法填充表格单元格。

【解决方案9】：

查看this demo

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

这是read的链接

【讨论】：

-1;使用break-all 将导致浏览器在决定在何处放置换行符时完全忽略换行符，其效果是即使您的单元格包含没有任何很长单词的普通散文，您最终也会在中间出现换行符字。这通常是不可取的。

【解决方案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%。

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

【讨论】：

【解决方案11】：

唯一需要做的就是在<td> 中为<td> 或<div> 添加宽度，具体取决于您要实现的布局。

例如：

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

【讨论】：

这基本上只是重复了几个月前loungerdork's answer 已经说过的话，没有添加任何新的信息或见解。

【解决方案12】：

看来您需要在块元素 (div) 上设置 word-wrap:break-word;，并指定（非相对）宽度。例如：

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

【讨论】：

【解决方案13】：

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

【讨论】：

【解决方案14】：

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

【讨论】：

【解决方案15】：

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

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

【讨论】：

【解决方案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>

【讨论】：

像其他几个答案一样，这里使它起作用的关键位是使用table-layout: fixed，但已经有a much older answer 建议，所以这个答案不会添加任何新信息。

【解决方案17】：

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

【讨论】：

这基本上与top-voted answer 重复；在这两种情况下，解决方案都归结为“使用table-layout: fixed”。

【解决方案18】：

如果你不需要表格边框，应用这个：

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

【讨论】：

已有much older answer建议使用table-layout: fixed；这不会向页面添加任何新内容。

【解决方案19】：

更改您的代码

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>

【讨论】：

-1;这使得浏览器完全忽略单词中断并在单词中间中断，即使它不需要。这很少是可取的行为，而且可能不是 OP 想要的行为，否则他们一开始就不会使用 break-word。

【解决方案20】：

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

【讨论】：

虽然这个 hack 实际上似乎适用于所有浏览器，但请注意 CSS 规范并不能保证这一点。根据w3.org/TR/CSS21/visudet.html#propdef-max-width，“'min-width' 和 'max-width' 对表格、内联表格、表格单元格、表格列和列组的影响是未定义的”。

【解决方案21】：

如果适合你可以试试这个...

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

【讨论】：

【解决方案22】：

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

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

【讨论】：

它在不改变表格样式的情况下工作......今天在 Chrome 上。

【解决方案23】：

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

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

【讨论】：

【解决方案24】：

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

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

【讨论】：

【解决方案25】：

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

通常这对我有用，即使在桌子内： word-break: break-word;

【讨论】：

【解决方案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>

【讨论】：

【解决方案27】：

这可能会有所帮助，

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>

【讨论】：

【解决方案28】：

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

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

这使得值即使在表格内容发生更改时也能正确换行。

【讨论】：

【解决方案29】：

一个简单的解决方法是使用
每隔几个词来修剪它。

【讨论】：