在表格中使用“自动换行：break-word”[复制]-Java 学习之路

可能重复：在html表中自动换行

此文字的行为与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

这一切都很棒 .

然而，在我的情况下，这不是 div 而是 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 . 破解词似乎没有过滤掉 .

有谁知道make＃3是如何发生的？该解决方案只需要在Chrome中运行，但它也适用于其他更好的浏览器 .

附： “不要使用表格”没有帮助 .

2 回答

table-layout: fixed 将强制细胞适合 table （而不是相反），例如：

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

回复于 2024-05-12T03:01:14+08:00

125
你可以试试这个：

td p {word-break:break-all;}

但是，当有足够的空间时，它会显示为这样，除非您添加 <br> 标记：
```
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
```
所以，如果可能的话，我会建议在有换行符的地方添加 <br> 标签 .
```
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
```
http://jsfiddle.net/LLyH3/3/

此外，如果这不是't solve your problem, there' s类似的线程here .
回复于 2024-05-12T03:01:14+08:00

在表格中使用“自动换行：break-word”[复制]

2 回答

相关问题