HTML 表格中的自动换行

Word-wrap in an HTML table

提问by psychotik

I've been using word-wrap: break-wordto wrap text in divs and spans. However, it doesn't seem to work in table cells. I have a table set to width:100%, with one row and two columns. Text in columns, although styled with the above word-wrap, doesn't wrap. It causes the text to go past the bounds of the cell. This happens on Firefox, Google Chrome and Internet Explorer.

我一直在用s 和sword-wrap: break-word包装文本。但是，它似乎不适用于表格单元格。我有一个表设置为，有一行和两列。列中的文本虽然使用上述样式，但不会换行。它会导致文本越过单元格的边界。这发生在 Firefox、Google Chrome 和 Internet Explorer 上。divspanwidth:100%word-wrap

Here's what the source looks like:

这是源的样子：

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>

The long word above is larger than the bounds of my page, but it doesn't break with the above HTML. I've tried the suggestions below of adding text-wrap:suppressand text-wrap:normal, but neither helped.

上面的长字比我的页面的边界大，但它不会与上面的 HTML 中断。我已经尝试了以下添加text-wrap:suppress和的建议text-wrap:normal，但都没有帮助。

回答by Marc Stober

The following works for me in Internet Explorer. Note the addition of the table-layout:fixedCSS attribute

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

回答by Pratik Stephen

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

or

或者

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

回答by Rick Grundy

A long shot, but double-check with Firebug(or similar) that you aren't accidentally inheriting the following rule:

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

white-space:nowrap;

This may overrideyour specified line break behaviour.

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

回答by psychotik

Turns out there's no good way of doing this. The closest I came is adding "overflow:hidden;" to the div around the table and losing the text. The real solution seems to be to ditch table though. Using divs and relative positioning I was able to achieve the same effect, minus the legacy of <table>

事实证明没有好的方法可以做到这一点。我最接近的是添加“溢出：隐藏；” 到桌子周围的 div 并丢失文本。真正的解决方案似乎是放弃桌子。使用 div 和相对定位我能够达到相同的效果，减去遗留的<table>

2015 UPDATE:This is for those like me who want this answer. After 6 years, this works, thanks to all the contributors.

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%;
}

回答by loungerdork

As mentioned, putting the text within divalmost works. You just have to specify the widthof the div, which is fortunate for layouts which are static.

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

This works on FF 3.6, IE 8, Chrome.

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

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

回答by Alph.Dev

Workaround that uses overflow-wrap and works fine with normal table layout + table width 100%

使用溢出包装并在正常表格布局 + 表格宽度 100% 下正常工作的解决方法

https://jsfiddle.net/krf0v6pw/

https://jsfiddle.net/krf0v6pw/

HTML

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

Benefits:

好处：

• Uses overflow-wrap:break-wordinstead of word-break:break-all. Which is better because it tries to break on spaces first, and cuts the word off only if the word is bigger than it's container.
• No table-layout:fixedneeded. Use your regular auto-sizing.
• Not needed to define fixed widthor fixed max-widthin pixels. Define %of the parent if needed.

• 使用overflow-wrap:break-word代替word-break:break-all. 哪个更好，因为它首先尝试中断空格，并且仅当单词大于它的容器时才切断单词。
• 不需要table-layout:fixed。使用常规的自动调整大小。
• 不需要以像素为单位定义固定width或固定max-width。%如果需要，定义父级。

Tested in FF57, Chrome62, IE11, Safari11

在 FF57、Chrome62、IE11、Safari11 中测试

回答by Duc Nguyen

Change your code

更改您的代码

word-wrap: break-word;

to

到

word-break:break-all;

Example

例子

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

回答by Piotr Findeisen

Problem with

有问题

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

is that it will work not so good when text hassome spaces, e.g.

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

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

If word andthenlongerwithoutspacesfits into table cell in one line but long text with andthenlongerwithoutspacesdoes not, the long word will be broken in two, instead of being wrapped.

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

Alternative solution: insert U+200B (ZWSP), U+00AD (soft hyphen) or U+200C (ZWNJ) in every long word after every, say, 20th character (however, see warning below):

替代解决方案：在每个长单词中，例如第 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>

Warning: inserting additional, zero-length characters does not affect reading. However, it does affect text copied into clipboard (these characters are of course copied as well). If the clipboard text is later used in some search function in the web app... search is going to be broken. Although this solution can be seen in some well known web applications, avoid if possible.

警告：插入额外的零长度字符不会影响阅读。但是，它确实会影响复制到剪贴板中的文本（这些字符当然也会被复制）。如果剪贴板文本稍后用于网络应用程序的某些搜索功能......搜索将被破坏。尽管在一些众所周知的 Web 应用程序中可以看到此解决方案，但请尽可能避免。

Warning: when inserting additional characters, you should not separate multiple code points within grapheme. See https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundariesfor more info.

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

回答by AabinGunz

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

Here is the link to read

这是阅读的链接

回答by Waylon Flinn

Tested in IE 8 and Chrome 13.

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

This causes the table to fit the width of the page and each column to take up 50% of the width.

这会导致表格适合页面的宽度，并且每列占据宽度的 50%。

If you prefer the first column to take up more of the page, add a width: 80%to the tdas in the following example, replacing 80% with the percentage of your choice.

如果你喜欢第一列占用更多的页面，添加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>