HTML表中的自动换行

HTML CSS

A伽罗

2020-03-17

我一直在用s和s word-wrap: break-word包装文字。但是，它似乎不适用于表单元格。我将表设置为，其中包含一行和两列。列中的文本尽管具有上述样式，但不会自动换行。它导致文本超出单元格的边界。在Firefox，Google Chrome和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，但均无济于事。

第1937篇《HTML表中的自动换行》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共20个回答

宝儿凯 2020.03.17

You can try this if it suits you...

Put a textarea inside your td and disable it with background color white and define its number of rows.

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

泡芙Pro 2020.03.17

A solution which work with Google Chrome and Firefox (not tested with Internet Explorer) is to set display: table-cell as a block element.

神奇阿良Jim 2020.03.17

Tables wrap by default, so make sure the display of the table cells are table-cell:

td {
   display: table-cell;
}

樱猪猪 2020.03.17

If you do not need a table border, apply this:

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

村村米亚小小 2020.03.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" >

Demo - http://jsfiddle.net/Ne4BR/749/

This worked great for me. I had long links that would cause the table to exceed 100% on web browsers. Tested on IE, Chrome, Android and Safari.

Stafan达蒙L 2020.03.17

这对我有用：

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

Stafan西门凯 2020.03.17

似乎您需要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-allAbhishek Simon的建议。

Stafan猴子 2020.03.17

赢得赏金的答案是正确的，但如果表的第一行具有合并/联接的单元格（所有单元格的宽度相等），则该答案将无效。

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

梅泡芙 2020.03.17

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

猪猪Near 2020.03.17

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

猴子NearJinJin 2020.03.17

唯一需要做的就是根据要实现的布局，在<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>

阳光小胖 2020.03.17

查看这个演示

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

这是阅读链接

ProHarry逆天 2020.03.17

问题

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

是当文本有一些空格时，它的工作效果不是很好，例如

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

如果单词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):

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.

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

猪猪Near 2020.03.17

更改您的代码

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>

达蒙达蒙 2020.03.17

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

A村村 2020.03.17

如前所述，将文本放在div几乎可行的范围内。你只需要指定width的div，这是幸运，布局这是静态的。

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

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

别太浪 2020.03.17

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

要么

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

Near小胖 2020.03.17

事实证明，没有做到这一点的好方法。我最接近的是添加“ overflow：hidden;”。到表格周围的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%;
}

路易Stafan 2020.03.17

远射，但请仔细检查Firebug（或类似工具），以确保您没有意外继承以下规则：

white-space:nowrap;

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

Stafan阿飞 2020.03.17

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

相似问题

基于react18+vite4+zustand网页端仿微信聊天实例

0 回答

基于tauri+vite4+pinia跨端后台管理系统应用

0 回答

HTML5 Drag与Drop 拖动时更改图标/光标

5 回答

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

25 回答

基于tauri+vue3跨端聊天应用|tauri仿微信模板

0 回答

Ace Editor一款比较好用的展示代码组件

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android