How can I allow text to wrap inside a word if necessary?
css, html, word-break
Solution
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>
Problem
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).