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.
This question is related to
css
google-chrome
html-table
word-wrap
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>