在表中使用“自动换行：断词”

小编典典

在表中使用“自动换行：断词”

css

这段文字的行为完全符合我在Google Chrome浏览器（和其他现代浏览器）上的期望：

<div style="border: 1px solid black; width:100%; word-wrap: break-word;">
  <p>
    aaaaaaaaaaaaaaaa
    bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
  </p>
</div>

当浏览器足够宽时，a +和b +处于同一行。
```
aaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
```
缩小浏览器范围时，a +和b +放在单独的行上。
```
aaaaaaaaaaaaaaaa
```
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
当b +不再适合时，它会折断并放在两行上（总共三行）。
```
aaaaaaaaaaaaaaaa
```
bbbbbbbbbbbbbbbbbbbbbbbb
bbbbbbbb

太好了

但是，在我的情况下，这不是a div而是a table，如下所示：

<table style="border:1px solid black; width:100%; word-wrap:break-word;">
  <tr>
    <td>
      <p>
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
      </p>
    </td>
  </tr>
</table>

在这种情况下，发生＃1和＃2，但没有发生＃3。也就是说，表格在第2步之后停止缩小，并且从没有发生过第3步。中断词似乎没有被过滤掉。

有谁知道如何使＃3发生？该解决方案只需要在Chrome中工作，但它也可以在其他浏览器中工作，甚至更好。

PS“不要使用表格”没有帮助。

阅读 331

2020-05-16

共1个答案

小编典典

table-layout: fixed 将迫使细胞适应桌子（而不是相反），例如：

<table style="border: 1px solid black; width: 100%; word-wrap:break-word;
              table-layout: fixed;">
  <tr>
    <td>
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
    </td>
  </tr>
</table>

2020-05-16