HTML表格中的自动换行

Question

我一直在用s和s word-wrap: break-word包装文本.但是,它似乎不适用于表格单元格.我有一个表设置,有一行和两列.列中的文本虽然使用上面的样式,但不会换行.它会使文本超出单元格的边界.这种情况发生在Firefox,谷歌浏览器和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,但也有帮助.

Answer 1

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

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几乎可以正常工作中.你只需要指定width的div,这是幸运,布局这是静态的.

这适用于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.使用常规自动调整大小.
• 不需要定义固定width或固定max-width的像素.%如果需要,定义父级.

在FF57,Chrome62,IE11,Safari11中测试过

Answer 7

改变你的代码

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 8

问题

<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(软连字符)或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应用程序的某些搜索功能中使用...搜索将被破坏.尽管可以在一些众所周知的Web应用程序中看到此解决方案,但请尽可能避免.

警告:插入其他字符时,不应在字形中分隔多个代码点.有关详细信息,请参阅https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries.

Answer 9

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

Answer 10

看看这个演示

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

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

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

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

Answer 13

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

Answer 14

看来你需要设置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-all根据Abhishek Simon的建议使用.

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

Answer 16

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

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

Answer 17

这里常见的令人困惑的问题是我们有 2 个不同的 css 属性：word-wrap和word-break。除此之外，自动换行还有一个名为 .. 的选项break-word，很容易混淆:-)

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

Answer 18

这对我有用:

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

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

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

Answer 20

这可能有帮助，

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 21

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

td {
   display: table-cell;
}