How can I allow text to wrap inside a word if necessary?

html css word-break
D'Arcy Rittich picture D'Arcy Rittich · Feb 13, 2010 · Viewed 12.7k times · Source

I am looking for the best solution to allow text to wrap in the middle of a word if necessary. By best, I mean most browser-compatible, and will favor word breaks before it breaks inside a word.

It would also help if the markup looked nicer than mine (see my answer).

Edit:

Note this is specifically for user-generated content.

Edit 2:

About 25% of Firefox users on the site in question are still using v3.0 or below, so it is critical to support them. This is based on the last month worth of data (about 121,000 visits).

Answer

wsanville picture wsanville · Feb 13, 2010

The css property word-wrap: break-word will force long words to wrap to the next line if they are too long for their container. This is supported by IE (going way back), Firefox and Safari.

Edit: Looks like you may be able to achieve this in older versions of Firefox as well using white-space: -moz-pre-wrap and white-space: pre-wrap. See here for more info. I have not tested this with older versions of Firefox though.

Related questions

Difference between overflow-wrap and word-break?

What´s the exact difference between overflow-wrap/word-wrap and word-break? And can anybody tell me what´s the better one for breaking very long links? Most people say you should use word-break in combination with overflow-wrap but it doesn't look …

Read More
CSS, Text overflows out of table cell

I am working on Virtual Machine so I can't copy code... I will post the screens then. Problem is trivial I guess but I can't deal with it... please give me some suggestions: Table code: https://dl.dropboxusercontent.com/u/108321090/…

Read More
Breaking words using CSS

When the text in <p> tag is too long, it appears like this, how to prevent this with CSS? I've tried the CSS property word-break: break-all; but Firefox and Opera doesn't support this property, and besides that other "…

Read More