Поскольку нет однозначного ответа (зависит от ваших потребностей, например, хотите ли вы дефисы, какие браузеры вы должны поддерживать?), Я провел некоторое исследование через Adobe BrowserLab , чтобы выяснить, какие варианты есть. :
Если вам не нужны дефисы, вы получите наилучшую совместимость, используя <wbr>. Если вам требуются дефисы, тогда лучше использовать ­, но учтите, что это не сработает (перенести на символ) в Firefox 2.0 Mac / Windows или Safari 3.0.
И обратите внимание, что если вы решите вообще не обрабатывать длинные слова с помощью переполнения, прокрутки или разрешения переноса символа, IE6 и IE7 ответят увеличением ширины контейнера (по крайней мере, с помощью DIV, который я использовал ), так что будьте осторожны.
Результаты:
<b>Browser Method Wraps at char Adds Hyphens Overflows horizontally Container expands horizontally</b>
----------------------------------------------------------------------------------------------------------------------------------------------
Firefox 3.0 - Windows XP None <b>No</b> No <b>Yes</b> 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 <b>No</b> No <b>Yes</b> No
IE7 - Windows XP None <b>No</b> No No <b>Yes</b>
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 <b>No</b> No <b>Yes</b> 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 <b>No</b> No <b>Yes</b> No
Safari 3.0 - OS X None <b>No</b> No <b>Yes</b> No
Safari 3.0 - OS X <wbr> Yes No No No
Safari 3.0 - OS X ­ or ­ <b>No</b> No No No
Safari 3.0 - OS X word-wrap: break-word Yes No No No
Chrome 3.0 - Windows XP None <b>No</b> No <b>Yes</b> 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 <b>No</b> No <b>Yes</b> No
Firefox 2.0 - OS X <wbr> Yes No No No
Firefox 2.0 - OS X ­ or ­ <b>No</b> No <b>Yes</b> No
Firefox 2.0 - OS X word-wrap: break-word <b>No</b> No <b>Yes</b> No
Firefox 2.0 - Windows XP None <b>No</b> No <b>Yes</b> No
Firefox 2.0 - Windows XP <wbr> Yes No No No
Firefox 2.0 - Windows XP ­ or ­ <b>No</b> No <b>Yes</b> No
Firefox 2.0 - Windows XP word-wrap: break-word <b>No</b> No <b>Yes</b> No
Firefox 3.5 - Windows XP None <b>No</b> No <b>Yes</b> 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 <b>No</b> No <b>Yes</b> 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 <b>No</b> No No <b>Yes</b>
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 <b>No</b> No <b>Yes</b> 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 <b>No</b> No <b>Yes</b> 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
Пример 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>