在表中使用“自动换行：断词”[重复]

Posted 2023-02-19

【中文标题】在表中使用“自动换行：断词”[重复]

【英文标题】：Using "word-wrap: break-word" within a table [duplicate]

【发布时间】：2011-08-18 20:54:59

【问题描述】：

可能重复：Word-wrap in a html table

此文本在 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 步永远不会发生。断词似乎没有被过滤掉。

有人知道#3 是如何发生的吗？该解决方案只需要在 Chrome 中工作，但它也可以在其他更好的浏览器中工作。

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

【问题讨论】：

有趣的问题，以前没见过。尽管这个主题似乎提出了一个类似（相同？）的问题：***.com/questions/1258416/word-wrap-in-a-html-table

这里和其他地方有很多关于相关问题的讨论。围绕这个问题肯定有很多困惑和很多浏览器不兼容问题。

推荐使用 CSS perishablepress.com/wrapping-content包装长 URL 和文本内容

【参考方案1】：

你可以试试这个：

td p word-break:break-all;

然而，当有足够的空间时，这会让它看起来像这样，除非你添加一个<br>标签：

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

所以，如果可能的话，我建议在有换行符的地方添加<br> 标签。

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

http://jsfiddle.net/LLyH3/3/

另外，如果这不能解决你的问题，有一个类似的帖子here。

【参考方案2】：

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>

【讨论】：

注意，使用table-layout: fixed，您将失去表格的“动态列宽”功能 - 所有列都将设置为相同的大小。