在表格中使用"自动换行:break-word"

Question

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

此文字的行为与Google Chrome(和其他现代浏览器)完全一样:

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

1. 当浏览器足够宽时,+和b +在同一行.

   aaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
   

2. 缩小浏览器范围时,+和b +放在不同的行上.

   aaaaaaaaaaaaaaaa
   bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
   

3. 当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中运行,但它也适用于其他更好的浏览器.

PS"不要使用表格"没有帮助.

Answer 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>

Answer 2

你可以试试这个:

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

但是,当有足够的空间时,这会使它看起来像这样,除非你添加一个<br>标签:

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

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

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

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

另外,如果这不能解决您的问题,有一个类似的线程在这里.