CSS: How do I wrap text with no whitespace inside a <td>?

Question

I've used:

word-break:break-all;
table-layout:fixed

and the text wraps in Chrome but not Firefox.

Update: I decided to change the design so it didn't need the wrap; trying to sort out a CSS fix/hack was proving too frustrating and time consuming.

Answer 1

Set a column witdh for td tag.

Answer 2

Use CSS3 word-wrap: break-word;. Works in WebKit based browsers (Safari, Chrome) as well.

Update: I forgot, the element in question must however be either implicitly or explicitly positioned as fixed element or displayed as block element. For table cells (td), use display: inline-block;.

Answer 3

One slightly hackish way of doing this is by processing the text to add space between each letter. Replace spaces with   Then use the letter-spacing css attribute to bring the spaces down.

I know, it's a hack... but if NOTHING else works, it should wrap without problem.

Answer 4

You can manually inject zero width spaces (&#8203;) to create break points.

Answer 5

I think this is a long standing issue in Firefox, that harks back to Mozilla and Netscape. I'll bet you were having the issue with the display of long URLs. I think it is an issue with the rendering engine rather than something you can fix with CSS, without some ugly hacks.

Makes sense to change the design.

This looked hopeful though: http://hacks.mozilla.org/2009/06/word-wrap/