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 <wbr>. 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 <wbr> 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 <wbr> 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 <wbr> 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 <wbr> 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 <wbr> 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 <wbr> 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 <wbr> 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 <wbr> 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 <wbr> 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 <wbr> 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 <wbr> 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 <wbr> 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:
<html>
<head>
<style>
div {
width: 4em;
border: 1px solid black;
margin-bottom: 6em;
padding: .25em;
}
</style>
</head>
<body>
This is text easily contained by the DIV:
<div>proper width</div>
A long word with no character breaking:
<div>
AReallyLongWordThatNeedsToBeBroken AndAnotherWord
</div>
<i><wbr></i> tag:
<div>
A<wbr>R<wbr>e<wbr>a<wbr>l<wbr>l<wbr>y<wbr>L<wbr>o<wbr>n<wbr>g<wbr>W<wbr>o<wbr>r<wbr>d<wbr>T<wbr>h<wbr>a<wbr>t<wbr>N<wbr>e<wbr>e<wbr>d<wbr>s<wbr>T<wbr>o<wbr>B<wbr>e<wbr>B<wbr>r<wbr>o<wbr>k<wbr>e<wbr>n A<wbr>n<wbr>d<wbr>A<wbr>n<wbr>o<wbr>t<wbr>h<wbr>e<wbr>r<wbr>W<wbr>o<wbr>r<wbr>d
</div>
<i>&shy;</i> character:
<div>
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
</div>
<i>overflow: scroll</i> CSS attribute:
<div style="overflow: scroll">
AReallyLongWordThatNeedsToBeBroken AndAnotherWord
</div>
<i>word-wrap: break-word</i> CSS attribute:
<div style="word-wrap: break-word">
AReallyLongWordThatNeedsToBeBroken AndAnotherWord
</div>
</body>
</html>
