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

Question

Possible duplicate:
Word-wrap in html table

This text behaves exactly the way I want in 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 placed on separate lines.

   aaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb 

• When b + is no longer suitable, it splits and fits on two lines (a total of three lines).

   aaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbb bbbbbbbb 

This is all great.

In my situation, however, this is not a div , but a table , for example:

 <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 occur, but not # 3. That is, the table stops narrowing after step 2, and step 3 never happens. The break slot does not seem to be filtered.

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

PS "Do not use tables" does not help.

Answer 1

table-layout: fixed will force the cells to correspond to the table (and not vice versa), for example:

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

Answer 2

You can try the following:

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

This, however, makes it look like when there is enough space, unless you add the <br> tag:

 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb 

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

 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb 

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

In addition, if this does not solve your problem, there is a similar thread there .