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

Answer 1

You may want to check the word-wrap: break-word CSS property.

The following example works in Google Chrome 4.0, Firefox 3.5.7, Safari 4.0.4, and IE 8:

    

        Loremipsumdolorsitametconsectetueradipiscingelitselaoreetdoloremagnaaliq
    

Unfortunately as noted by BalusC in a comment to one of the answers, the above will not work in versions of Firefox older than 3.5. Since the population of users using old Firefox versions seems to be below ~6%, as noted by T.J. Crowder, you may want to fallback to an overflow: scroll for browsers that do not support word-wrap. It may not look very nice, but if you are not expecting many words to be longer than the allocated space, the probability that one of the users will see the scroll bar would be very low, and it will get even lower as time passes and users upgrade their browsers. At least you would be failing gracefully in those situations.