I've been using word-wrap: break-word to wrap text in divs and spans. However, 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, doesn't wrap. It causes the text to go past the bounds of the cell. This happens on Firefox, Google Chrome and Internet Explorer.

The long word above is 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.

Unfortunately, the text in there comes from user-generated content. Of course, I could pre-process it and add the hyphen, but I was hoping there would be a better way.
– psychotikAug 11 '09 at 6:36

I apologize for using word 'hard-hyphen'. In HTML, the plain hyphen is represented by the "-" character (&#45; or &#x2D;). The soft hyphen is represented by the character entity reference &shy; (&#173; or &#xAD;)
– adatapostAug 11 '09 at 6:58

Are you really using <code>break-wor<em>k</em></code>? Maybe that could have something to do with it.
– Ms2gerAug 11 '09 at 9:15

@marc!! dude, thanks so much for this. I was tasked with building a mobile version of a client site that uses tables, and i was having trouble getting this to work! table-layout:fixed did the trick!
– debugSep 14 '11 at 21:47

14

This makes the other columns much too wide.
– ClémentDec 13 '11 at 10:55

this didn't preferentially break on non-word characters (like, if I had a series of shorter words separated by spaces it would always run the words right up to the line, then break the last word in half). Word-wrap will break words only when necessary
– HashbrownMar 7 '16 at 0:31

1

update on @meotimdihia: it works on firefox now.
– LikakJul 30 '18 at 20:32

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>

2015 UPDATE: This is for those like me who want this answer. After 6 years, this works, thanks to all the contributors.

* { // this works for all but td
word-wrap:break-word;
}
table { // this somehow makes it work for td
table-layout:fixed;
width:100%;
}

While this hack does in fact seem to work in all browsers, beware that the CSS spec provides no guarantee of this. Per w3.org/TR/CSS21/visudet.html#propdef-max-width, "the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined".
– Mark AmeryJan 20 at 17:19

-1; this makes the browser completely ignore word breaks and break in the middle of words even if it doesn't need to. That's rarely desirable behaviour and presumably not the behaviour that the OP wanted, or else they wouldn't've been using break-word in the first place.
– Mark AmeryJan 20 at 17:05

Warning: inserting additional, zero-length characters does not affect reading. However, it does affect text copied into clipboard (these characters are of course copied as well). If the clipboard text is later used in some search function in the web app... search is going to be broken. Although this solution can be seen in some well known web applications, avoid if possible.

Perhaps the output from this is slightly better if, in sufficiently long words, you insert a soft hyphen after every character, so that the browser can reliably break the word at the right-hand edge of the containing element.
– Mark AmeryJan 20 at 18:06

While this is a viable solution, the seemingly innocuous suggestion to add something "after every, say, 20th character" is fraught with traps if you want to do it programmatically on your server. Iterating over the characters of a Unicode string is difficult in most programming languages. At best, a language may make it easy to iterate over Unicode code points, but those aren't necessarily what we'd want to refer to as "characters" (e.g. é may be written as two code points). We probably really mean "graphemes", but I don't know any language that makes it trivial to loop over those.
– Mark AmeryJan 20 at 18:17

1

@MarkAmery you're right. However, even with plain ASCII this isn't great. I added "warnings".
– Piotr FindeisenJan 21 at 19:57

-1; using break-all will cause the browser to completely ignore word breaks when deciding where to put line breaks, with the effect that even if your cell contains normal prose without any very long words, you'll end up with line breaks in the middle of words. This is typically undesirable.
– Mark AmeryJan 20 at 17:55

-1 for both the lack of any explanation and the bad solution. Putting the content inside a fixed-pixel-width p within a table cell that doesn't have a fixed pixel width will almost certainly end up with the p either overflowing or failing to fill the table cell.
– Mark AmeryJan 20 at 17:41

Like several other answers, the key bit here that makes it work is using table-layout: fixed, but there's already a much older answer suggesting that, so this answer doesn't add any new information.
– Mark AmeryJan 20 at 17:32

I found a solution that seems to work in Firefox, Google Chrome and Internet Explorer 7-9. For doing a two-column table layout with long text on the one side. I searched all over for similar problem, and what worked in one browser broke the other, or adding more tags to a table just seems like bad coding.

I did NOT use a table for this. DL DT DD to the rescue. At least for fixing a two-column layout, that is basically a glossary/dictionary/word-meaning setup.

Using floating word-wrap and margin left, I got exactly what I needed. Just thought I'd share this with others, maybe it will help someone else with a two-column definition style layout, with trouble getting the words to wrap.

I tried using word-wrap in the table cell, but it only worked in Internet Explorer 9, (and Firefox and Google Chrome of course) mainly trying to fix the broken Internet Explorer browser here.

Thank you for your interest in this question.
Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).