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

Since there is no definitive answer (depends on your needs, e.g., do you want hyphens, what browsers must you support?), I did some research via Adobe BrowserLab to find out what the options are:

If you do not need hyphens, you will get best compatibility using . If you require hyphens, then using ­ is your best bet, but note that this will not work (wrap at char) in Firefox 2.0 Mac/Windows, or Safari 3.0.

And, note that if you choose to not handle long words at all by using overflow, scroll or allowing wrap at a character, both IE6 and IE7 will respond by expanding the container width (at least with the DIV I used), so beware.

Results:

Browser                     Method                   Wraps at char    Adds Hyphens    Overflows horizontally    Container expands horizontally
----------------------------------------------------------------------------------------------------------------------------------------------
Firefox 3.0 - Windows XP    None                     No               No              Yes                       No
Firefox 3.0 - Windows XP                        Yes              No              No                        No
Firefox 3.0 - Windows XP    ­ or ­          Yes              Yes             No                        No
Firefox 3.0 - Windows XP    word-wrap: break-word    No               No              Yes                       No
IE7 - Windows XP            None                     No               No              No                        Yes
IE7 - Windows XP                                Yes              No              No                        No
IE7 - Windows XP            ­ or ­          Yes              Yes             No                        No
IE7 - Windows XP            word-wrap: break-word    Yes              No              No                        No
Firefox 3.0 - OS X          None                     No               No              Yes                       No
Firefox 3.0 - OS X                              Yes              No              No                        No
Firefox 3.0 - OS X          ­ or ­          Yes              Yes             No                        No
Firefox 3.0 - OS X          word-wrap: break-word    No               No              Yes                       No
Safari 3.0 - OS X           None                     No               No              Yes                       No
Safari 3.0 - OS X                               Yes              No              No                        No
Safari 3.0 - OS X           ­ or ­          No               No              No                        No
Safari 3.0 - OS X           word-wrap: break-word    Yes              No              No                        No
Chrome 3.0 - Windows XP     None                     No               No              Yes                       No
Chrome 3.0 - Windows XP                         Yes              No              No                        No
Chrome 3.0 - Windows XP     ­ or ­          Yes              Yes             No                        No
Chrome 3.0 - Windows XP     word-wrap: break-word    Yes              No              No                        No
Firefox 2.0 - OS X          None                     No               No              Yes                       No
Firefox 2.0 - OS X                              Yes              No              No                        No
Firefox 2.0 - OS X          ­ or ­          No               No              Yes                       No
Firefox 2.0 - OS X          word-wrap: break-word    No               No              Yes                       No
Firefox 2.0 - Windows XP    None                     No               No              Yes                       No
Firefox 2.0 - Windows XP                        Yes              No              No                        No
Firefox 2.0 - Windows XP    ­ or ­          No               No              Yes                       No
Firefox 2.0 - Windows XP    word-wrap: break-word    No               No              Yes                       No
Firefox 3.5 - Windows XP    None                     No               No              Yes                       No
Firefox 3.5 - Windows XP                        Yes              No              No                        No
Firefox 3.5 - Windows XP    ­ or ­          Yes              Yes             No                        No
Firefox 3.5 - Windows XP    word-wrap: break-word    Yes              No              No                        No
Firefox 3.5 - OS X          None                     No               No              Yes                       No
Firefox 3.5 - OS X                              Yes              No              No                        No
Firefox 3.5 - OS X          ­ or ­          Yes              Yes             No                        No
Firefox 3.5 - OS X          word-wrap: break-word    Yes              No              No                        No
IE6 - Windows XP            None                     No               No              No                        Yes
IE6 - Windows XP                                Yes              No              No                        No
IE6 - Windows XP            ­ or ­          Yes              Yes             No                        No
IE6 - Windows XP            word-wrap: break-word    Yes              No              No                        No
IE8 - Windows XP            None                     No               No              Yes                       No
IE8 - Windows XP                                Yes              No              No                        No
IE8 - Windows XP            ­ or ­          Yes              Yes             No                        No
IE8 - Windows XP            word-wrap: break-word    Yes              No              No                        No
Safari 4.0 - OS X           None                     No               No              Yes                       No
Safari 4.0 - OS X                               Yes              No              No                        No
Safari 4.0 - OS X           ­ or ­          Yes              Yes             No                        No
Safari 4.0 - OS X           word-wrap: break-word    Yes              No              No                        No

Sample HTML:

    
            
    
    
        This is text easily contained by the DIV:
        
proper width

        A long word with no character breaking:
        

            AReallyLongWordThatNeedsToBeBroken AndAnotherWord
        

        <wbr> tag:
        

            AReallyLongWordThatNeedsToBeBroken AndAnotherWord
        

        &shy; character:
        

            A­R­e­a­l­l­y­L­o­n­g­W­o­r­d­T­h­a­t­N­e­e­d­s­T­o­B­e­B­r­o­k­e­n A­n­d­A­n­o­t­h­e­r­W­o­r­d
        

        overflow: scroll CSS attribute:
        

            AReallyLongWordThatNeedsToBeBroken AndAnotherWord
        

        word-wrap: break-word CSS attribute:
        

            AReallyLongWordThatNeedsToBeBroken AndAnotherWord