在表格中使用"word-wrap: break-word"

83

可能是重复问题:
HTML表格中的自动换行

在Google Chrome(以及其他现代浏览器)中,此文本表现出我想要的效果:

<div style="border: 1px solid black; width:100%; word-wrap: break-word;">
  <p>
    aaaaaaaaaaaaaaaa
    bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
  </p>
</div>
  1. 当浏览器宽度足够时,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步永远不会发生。break-word似乎没有过滤掉。
    有人知道如何让#3发生吗?解决方案只需要在Chrome中工作,但如果它在其他浏览器中也能工作,那就更好了。
    附言:"不要使用表格"没有帮助。

    1
    有趣的问题,以前没有见过。不过似乎这个主题已经有类似(相同?)的问题被问到了:https://dev59.com/A3M_5IYBdhLWcg3wt1rD - Jeroen
    这个问题在这里和其他地方有很多讨论。毫无疑问,这个问题的混乱程度很高,而且浏览器的兼容性也存在很多问题。 - Matthew Simoneau
    使用CSS包装长URL和文本内容的参考:http://perishablepress.com/wrapping-content/ - LCJ
    2个回答

    146

    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>
    

    30
    注意,通过使用 table-layout: fixed 样式,您会失去表格的“动态列宽”特性——所有列的宽度都将被设置为相同的大小。 - spiderplant0

    26

    您可以尝试这个:

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

    然而,当有足够的空间时,这会使其呈现出以下效果,除非您添加一个<br>标签:

    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
    

    因此,我建议在可能的情况下,在换行处添加<br>标签。

    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
    

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

    如果这个不能解决你的问题,还有一个类似的帖子在这里


    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文,
    原文链接