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

CssGoogle ChromeHtml TableWord Wrap

Css Problem Overview


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

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.

Css Solutions


Solution 1 - Css

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>

Solution 2 - Css

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMatthew SimoneauView Question on Stackoverflow
Solution 1 - CssMatthew SimoneauView Answer on Stackoverflow
Solution 2 - CssHerman SchaafView Answer on Stackoverflow