Word-wrap in a html table

Question

I've been using

word-wrap: break word

to word wrap text in divs and spans, but it doesn't seem to work in table cells. I have a table set to width=100%, with one row and two columns. Text in columns, although styled with the above word-wrap attribute, doesn't wrap and causes the text to go past the bounds of the cell.

Any suggestions on how to work this? This happens on FF, Chrome and IE.

EDIT: Here's what the source looks like:

<table style="width: 100%;"><tr>
<td align="left"><div style="word-wrap: break-word;">looooooooooo...ng word</div></td>
<td align="right"><span style="display: inline;">Foo</span></td>
</tr></table>

The text "loooooooooooooo...ng" it larger than the bounds of my page but it doesn't break with the above html. I've tried the suggestions below of adding text-wrap:suppress and text-wrap:normal but neither helped.

Answer 1

What if you place a div inside the cell?

Answer 2

Tables wrap by default, so make sure the display of the table cells are table-cell:

td {
   display: table-cell;
}

Answer 3

Text from http://www.w3.org/TR/css3-text/#word-wrap

This property specifies whether the UA may break within a word to prevent overflow when an otherwise-unbreakable string is too long to fit within the line box. It only has an effect when 'text-wrap' is either 'normal' or 'suppress'. Possible values

Answer 4

A long shot, but double-check with Firebug (or similar) that you aren't accidentally inheriting the following rule:

white-space:nowrap;

This may override your specified line break behaviour.

Answer 5

Out of interest, what's the hight of the cell? Is it possible that the text is wrapping onto the next line, but the height isn't being adjusted for you?

Answer 6

Are you really using break-work? Maybe that could have something to do with it.

Answer 7

Turns out there's no good way of doing this. The closest I came is adding "overflow:hidden;" to the div around the table and losing the text. The real solution seems to be to ditch table though. Using divs and relative positioning I was able to achieve the same effect, minus the legacy of <table>

Answer 8

<td style="word-break:break-all;">longtextwithoutspace</td>

or

<span style="word-break:break-all;">longtextwithoutspace</span>

Answer 9

The following works for me in IE. Note the addition of table-layout:fixed:

<table style="table-layout: fixed">
<tr><td style="word-wrap:break-word">LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord</td></tr>
</table>