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

Question

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 1

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.