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

Question

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.

Fascinating problem, not seen it before. It seems though this topic a similar (the same?) question was asked: http://stackoverflow.com/questions/1258416/word-wrap-in-a-html-table — Jeroen, May 04 '11 at 20:54
There's lots of discussion on related issues here and elsewhere. There is definitely a lot of confusion around this issue and a lot of browser incompatibilities. — Matthew Simoneau, May 05 '11 at 15:41
Referred Wrapping Long URLs and Text Content with CSS http://perishablepress.com/wrapping-content/ — LCJ, Nov 22 '12 at 11:10

score 145 · Accepted Answer · answered May 05 '11 at 23:22

145

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>

answered May 05 '11 at 23:22

Matthew Simoneau

6,199
6
35
46

29

Note, with `table-layout: fixed` you loose the 'dynamic column width' feature of tables - all columns will be set to the same size. – spiderplant0 Sep 23 '15 at 10:10

score 25 · Answer 2 · edited May 23 '17 at 12:26

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.

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

2 Answers2

Linked