logo标签列表

HTML表格中的自动换行

htmlcsshtml-table
662

我一直在使用word-wrap: break-word来换行

和中的文本。但是，在表格单元格中似乎不起作用。我的表格设置为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，但都没有帮助。

<tr> <td style="text-wrap:normal;word-wrap:break-word"> 这是一份演示文稿。 </td> </tr> - KV Prajapati
不幸的是，那里的文本来自用户生成的内容。当然，我可以预处理它并添加连字符，但我希望有更好的方法。 - psychotik
你真的在使用 <code>break-wor<em>k</em></code> 吗？也许这与它有关。 - Ms2ger
1
如果您在这里，您可能还想查看 white-space: pre-wrap https://developer.mozilla.org/en-US/docs/Web/CSS/white-space - Tom Prats
考虑添加<wbr>标签。https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/wbr - Darth Egregious
显示剩余3条评论
30个回答
705

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

td {
  border: 1px solid;
}
<table style="table-layout: fixed; width: 100%">
  <tr>
    <td style="word-wrap: break-word">
      Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
    </td>
    <td>Short word</td>
  </tr>
</table>

3
@marc!! 伙计，非常感谢你。我被分配构建一个移动版本的客户站点，该站点使用表格，但我一直无法让它正常工作！table-layout:fixed解决了问题！ - debug
32
这会使得其他列变得过于宽广。 - Clément
4
请务必阅读 https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout ，表格和列的宽度由table和col元素的宽度或第一行单元格的宽度设置。后续行中的单元格不影响列宽度。听起来这对性能也有好处。 - Sam Barnum
2
@Clément，请看下面Indrek的答案关于<colgroup>，这个对我有用。 - andrewtweber
1
将table-layout:fixed;与其他给定的配置一起添加解决了我的问题。我在这里花时间评论是因为我忽略了每个答案中提到的table-layout:fixed;，而所有忽略table-layout:fixed;所做的只是延迟了解决问题并导致了沮丧。但当我最终除了其他答案中提到的配置之外还添加了table-layout:fixed;时，表格立即适应缩小的屏幕。 - CodeMed
显示剩余5条评论
211
<td style="word-break:break-all;">longtextwithoutspace</td>
或者
<span style="word-break:break-all;">longtextwithoutspace</span>
1
可以确认Pratik的方法在iOS（iPhone）上的Safari上也适用。 - occulus
为了解决一些短词和长词混合的问题，你可以尝试对文本进行预处理，并仅将长单词（例如，>40个字符）用<span>标签包裹起来。 - nornagon
9
这不被Firefox和Opera支持。 - meotimdihia
6
这并没有优先在非单词字符处断开（比如，如果我有一系列由空格分隔的较短单词，它总是会将单词顺着行走到底，然后将最后一个单词分成两部分）。自动换行仅在必要时才会断开单词。 - Hashbrown
2
这种方法更好，因为不需要使用“table-layout: fixed;”。 - Finesse
非常感谢您使用display: grid，这是一个非常优秀的解决方案。 - Lenin Zapata
169

您可以使用Firebug（或类似工具）进行双重检查，以确保您没有意外继承以下规则：

white-space:nowrap;

这可能会覆盖您指定的换行行为，从而破坏单词换行。（Shane Lee和Beer Me的评论。）要解决此问题，您可以将white-space:normal;添加到样式中。

这就是我继承的内容，它破坏了我的自动换行。 - shane lee
1
@RickGrundy如果遇到这个问题，你应该将它改成什么？ - cokedude
17
@cokedude 我来晚了，但是它是 white-space:normal;。 - Beer Me
62

实际上，没有很好的方法来解决这个问题。我找到的最接近的方法是在包围表格的div中添加“overflow:hidden;”，但会丢失文本。 真正的解决方案似乎是放弃使用表格。通过使用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”时，它就可以工作了。 - Example person
1
请注意，这将从根本上改变表格的布局方式，消除通常发生的自动列大小调整。请查阅“table-layout”以获取更多信息。 - Alan H.
33

如上所述，将文本放在 div 中几乎可以实现效果。您只需要指定 div 的 width，这对于静态布局非常方便。

此方法适用于 Firefox 3.6、IE 8 和 Chrome 浏览器。

<td>
  <div style="width: 442px; word-wrap: break-word">
    <!-- Long Content Here-->
  </div>
</td>
2
您可以在width属性后添加min-width: 100%，以确保div占据整个单元格。 - user1091949
我想用逗号（,）进行单词换行，例如 Long,Long,Long,Long,Long。我希望在任何逗号（,）之后进行换行。 - Karthikeyan
这是最好的解决方案！ - Rufat
这是最好的解决方案！ - undefined
25

利用overflow-wrap方法解决普通表格布局和100%表格宽度问题的解决方案

https://jsfiddle.net/krf0v6pw/

HTML

<table>
  <tr>
    <td class="overflow-wrap-hack">
      <div class="content">
        wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
      </div>
    </td>
  </tr>
</table>

CSS

->

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

虽然这种方法似乎在所有浏览器中都有效，但请注意CSS规范并不保证其可行性。根据https://www.w3.org/TR/CSS21/visudet.html#propdef-max-width的说明，“'min-width'和'max-width'对于表格、内联表格、表格单元格、表格列和列组的影响是未定义的”。 - Mark Amery
你甚至不需要一个单独的 div，但非常感谢！ - Glorfindel
20

问题出现在

<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（soft hyphen）或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。

也许，如果在足够长的单词中，在每个字符后插入一个软连字符，那么输出会稍微好一些，这样浏览器就可以可靠地在包含元素的右边缘断开单词。 - Mark Amery
虽然这是一个可行的解决方案，但是在服务器上以编程方式执行似乎无害的建议“在每个，比如第20个字符之后添加某些内容”充满了陷阱。在大多数编程语言中，对Unicode字符串的字符进行迭代是困难的。在最好的情况下，一种语言可能会使它易于迭代Unicode代码点，但那些并不一定是我们要称为“字符”的东西（例如，é可能被写成两个代码点）。我们可能真正意思是“字形”，但我不知道任何一种语言可以轻松循环遍历它们。 - Mark Amery
1
@MarkAmery 你说得对。然而，即使是使用纯ASCII也不是很好。我添加了“警告”。 - Piotr Findeisen
18

改变你的代码

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；这会使浏览器完全忽略单词间的断点，即使它不需要也会在单词中间断开。这很少是期望的行为，而且很可能不是原帖作者想要的行为，否则他们一开始就不会使用 break-word。 - Mark Amery
16
请参考此演示 

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

这里是链接

使用break-all会导致浏览器在决定放置换行符的位置时完全忽略单词断点，从而导致即使您的单元格包含没有非常长的单词的普通散文，您也会在单词中间出现换行符。这通常是不可取的。 - Mark Amery
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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接