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

Possible Duplicate:
Word-wrap in a html table

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

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

When the browser is wide enough, a+ and b+ are on the same line.
```
aaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
```
As you narrow the browser, a+ and b+ are put on separate lines.
```
aaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
```
When b+ can no longer fit, it is broken and put on two lines (for a total of three lines).
```
aaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbb
bbbbbbbb
```

That's all great.

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

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

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.

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

134634 次浏览

小开

You can try this:

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

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

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

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

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

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

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

小开

最佳答案

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

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