HTML表格中的自动换行-Java 学习之路

502

我一直在使用 word-wrap: break-word 来包装 div 和 span 中的文本 . 但是，它似乎不适用于表格单元格 . 我有一个设置为 width:100% 的表，有一行和两列 . 列中的文本虽然使用上面的 word-wrap 样式，但不会换行 . 它导致文本超出单元格的边界 . 这种情况发生在Firefox，谷歌浏览器和Internet Explorer上 .

以下是源代码：

td {
  border: 1px solid;
}

<table style="width: 100%;">
  <tr>
    <td align="left">
      <div style="word-wrap: break-word;">Long Content</div>
    </td>
    <td align="right"><span style="display: inline;">Short Content</span>
    </td>
  </tr>
</table>

"Long Content"大于我的页面边界，但它没有尝试下面添加 text-wrap:suppress 和 text-wrap:normal 的建议，但都没有帮助 .

22 回答

在IE 8和Chrome 13中测试过 .

<table style="table-layout: fixed; width: 100%">
    <tr>
        <td align="left">
              <div style="word-wrap: break-word;">
                 longtexthere
              </div>
        </td>
        <td align="right"><span style="display: inline;">Foo</span></td>
    </tr>
</table>

这会使表格适合页面的宽度，每列占据宽度的50％ .

如果您希望第一列占据更多页面，请将 width: 80% 添加到 td ，如下例所示，将80％替换为您选择的百分比 .

<table style="table-layout: fixed; width: 100%">
    <tr>
        <td align="left" style="width:80%">
               <div style="word-wrap: break-word;">
                 longtexthere
               </div>
            </td>
        <td align="right"><span style="display: inline;">Foo</span></td>
    </tr>
</table>

回复于 2024-04-30T07:30:13+08:00

4
表默认包装，因此请确保表格单元格的显示为 table-cell ：
```
td {
   display: table-cell;
}
```
回复于 2024-04-30T07:30:13+08:00

唯一需要做的就是根据你想要实现的布局，在 <td> 或 <td> 内添加 <div> 宽度 .

例如：

<table style="width: 100%;" border="1"><tr>
<td align="left" ><div style="word-wrap: break-word; width: 100px;">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
<td align="right"><span style="display: inline;">Foo</span></td>
</tr></table>

要么

<table style="width: 100%;" border="1"><tr>
    <td align="left" width="100" ><div style="word-wrap: break-word; ">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
    <td align="right"><span style="display: inline;">Foo</span></td>

</tr></table>

回复于 2024-04-30T07:30:13+08:00

9
一个远景，但仔细检查Firebug（或类似），你不会意外地继承以下规则：
```
white-space:nowrap;
```
This may override您指定的换行符 .
回复于 2024-04-30T07:30:13+08:00
23
使用溢出换行的解决方法，并且正常表格布局表格宽度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中测试过
回复于 2024-04-30T07:30:13+08:00

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

回复于 2024-04-30T07:30:13+08:00

查看this demo

<table style="width: 100%;">
<tr>
    <td align="left"><div style="word-break:break-all;">LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord</div>
    </td>
    <td align="right">
        <span style="display: inline;">Foo</span>
    </td>
</tr>
</table>

这是read的链接

回复于 2024-04-30T07:30:13+08:00

赢得赏金的答案是正确的，但如果 table has a merged/joined cell 的第一行（所有单元格的宽度相等），它就不起作用 .

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

回复于 2024-04-30T07:30:13+08:00

7
事实证明，没有好办法做到这一点 . 我最接近的是将"overflow:hidden;"添加到 table 周围的div并丢失文本 . 真正的解决方案似乎是放弃了表 . 使用div和相对定位我能够达到同样的效果，减去了 <table> 的遗产

2015 UPDATE: 这适合那些想要这个答案的人 . 经过6年的努力，这要归功于所有的贡献者 .
```
* { // this works for all but td
  word-wrap:break-word;
}

table { // this somehow makes it work for td
  table-layout:fixed;
  width:100%;
}
```
回复于 2024-04-30T07:30:13+08:00
16
我找到了一个似乎适用于Firefox，谷歌浏览器和Internet Explorer 7-9的解决方案 . 用于执行一列中包含长文本的双列表格布局 . 我搜遍了所有类似的问题，在一个浏览器中工作的东西打破了另一个，或者在表中添加更多标签似乎是错误的编码 .

我没有为此使用表格 . DL DT DD来救援 . 至少对于修复两列布局，这基本上是词汇表/词典/单词意义设置 .
```
<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>
```
还有一些通用的造型 .
```
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;
}
```
使用浮动自动换行和左边距，我得到了我所需要的 . 只是以为我会与其他人分享这个，也许它会帮助其他人使用两列定义样式布局，但是无法获得包装的话 .

我尝试在表格单元格中使用自动换行，但它只适用于Internet Explorer 9（当然还有Firefox和Google Chrome），主要是尝试修复损坏的Internet Explorer浏览器 .
回复于 2024-04-30T07:30:13+08:00

由于缺少可运行的代码片段：

没有样式

td {
  border: 1px solid gold;
}

<table>
  <tr>
    <td>
      LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
    </td>
  </tr>
</table>

使用table-layout：固定用于表和自动换行：break-word for td（Marc Stober的回答）

td {
  border: 1px solid gold;
}

<table style="table-layout: fixed; width: 100%">
  <tr>
    <td style="word-wrap: break-word">
      LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
    </td>
  </tr>
</table>

使用分词：break-all（Pratik Stephen的回答）

td {
  border: 1px solid gold;
}

<table>
  <tr>
    <td style="word-break: break-all">
      LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
    </td>
  </tr>
</table>

回复于 2024-04-30T07:30:13+08:00

7
如上所述，将文本放在 div 中几乎可以正常工作 . 你只需要指定 div 的 width ，这是幸运的静态布局 .

这适用于FF 3.6，IE 8，Chrome .
```
<td>
  <div style="width: 442px; word-wrap: break-word">
    
  </div>
</td>
```
回复于 2024-04-30T07:30:13+08:00

看来你需要在具有指定（非相对）宽度的块元素（ div ）上设置 word-wrap:break-word; . 例如：

<table style="width: 100%;"><tr>
<td align="left"><div style="display:block; word-wrap: break-word; width: 40em;">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word</div></td>
<td align="right"><span style="display: inline;">Foo</span></td>
</tr></table>

或根据Abhishek Simon的建议使用 word-break:break-all .

回复于 2024-04-30T07:30:13+08:00

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

要么

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

回复于 2024-04-30T07:30:13+08:00

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

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

回复于 2024-04-30T07:30:13+08:00

103

与Google Chrome和Firefox（未经过Internet Explorer测试）配合使用的解决方案是将 display: table-cell 设置为块元素 .

回复于 2024-04-30T07:30:13+08:00

这对我有用：

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

And table attribute is:

table {
      table-layout: fixed;
      width: 100%
   }

</style>

回复于 2024-04-30T07:30:13+08:00

1
style =“table-layout：fixed; width：98％;自动换行：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上测试过 .

鲍比
回复于 2024-04-30T07:30:13+08:00

575

改变你的代码

word-wrap: break-word;

至

word-break:break-all;

例

<table style="width: 100%;">
  <tr>
    <td align="left">
      <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 align="right"><span style="display: inline;">Short Content</span>
    </td>
  </tr>
</table>

回复于 2024-04-30T07:30:13+08:00

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

回复于 2024-04-30T07:30:13+08:00

9
问题
```
<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） .
回复于 2024-04-30T07:30:13+08:00
133

来自http://www.w3.org/TR/css3-text/#word-wrap的文字

此属性指定UA是否可以在单词中断，以防止在其他不可破坏的字符串太长而无法放入行框内时溢出 . 它只有在'text-wrap'为'normal'或'suppress'时才有效 . 可能的值

回复于 2024-04-30T07:30:13+08:00

HTML表格中的自动换行

22 回答

使用溢出换行的解决方法，并且正常表格布局表格宽度100％正常工作

没有样式

使用table-layout：固定用于表和自动换行：break-word for td（Marc Stober的回答）

使用分词：break-all（Pratik Stephen的回答）

相关问题