CSS 在表格中使用“word-wrap: break-word”

Using "word-wrap: break-word" within a table

提问by Matthew Simoneau

Possible Duplicate:
Word-wrap in a html table

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

This text behaves exactly the way I want on Google Chrome (and other modern browsers):

这段文字在 Google Chrome（和其他现代浏览器）上的表现完全符合我的要求：

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

1. When the browser is wide enough, a+ and b+ are on the same line.

   aaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
   

2. As you narrow the browser, a+ and b+ are put on separate lines.

   aaaaaaaaaaaaaaaa
   bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
   

3. When b+ can no longer fit, it is broken and put on two lines (for a total of three lines).

   aaaaaaaaaaaaaaaa
   bbbbbbbbbbbbbbbbbbbbbbbb
   bbbbbbbb
   

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

   aaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
   

2. 当您缩小浏览器的范围时，a+ 和 b+ 放在不同的行上。

   aaaaaaaaaaaaaaaa
   bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
   

3. 当 b+ 装不下时，它被打破并放在两行（总共三行）。

   aaaaaaaaaaaaaaaa
   bbbbbbbbbbbbbbbbbbbbbbbb
   bbbbbbbb
   

That's all great.

这一切都很棒。

In my situation, however, this is not a divbut a table, like so:

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

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

In this case, #1 and #2 happen, but not #3. That is, the table stops narrowing after step 2 and step 3 doesn't ever happen. The break-word doesn't seem to be filtering down.

在这种情况下，#1 和 #2 会发生，但不会发生 #3。也就是说，表格在第 2 步之后停止缩小，第 3 步永远不会发生。断词似乎没有被过滤掉。

Does anyone know how make #3 happen? The solution only need work in Chrome, but it it also worked in other browsers that would be even better.

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

P.S. "Don't use tables" is not helpful.

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

回答by Matthew Simoneau

table-layout: fixedwill get force the cells to fit the table (and not the other way around), e.g.:

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>

回答by Herman Schaaf

You can try this:

你可以试试这个：

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

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

This, however, makes it appear like this when there's enough space, unless you add a <br>tag:

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

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

So, I would then suggest adding <br>tags where there are newlines, if possible.

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

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

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

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

Also, if this doesn't solve your problem, there's a similar thread here.

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