Red*_*ter 23 html css word-break
我正在寻找最好的解决方案,允许文本在必要时包含在单词的中间.最好的,我的意思是大多数浏览器兼容,并且会在单词中断之前支持单词分隔符.
如果标记看起来比我的好,也会有所帮助(参见我的回答).
编辑:
请注意,这是专门针对用户生成的内容.
编辑2:
该网站上大约25%的Firefox用户仍在使用v3.0或更低版本,因此支持他们至关重要.这是基于上个月的数据(约121,000次访问).
wsa*_*lle 23
如果css属性word-wrap: break-word对于容器而言太长,则会强制将长字包裹到下一行.IE(后退),Firefox和Safari支持这一点.
编辑:看起来你可以在旧版本的Firefox中实现这一点,以及使用white-space: -moz-pre-wrap和white-space: pre-wrap.有关详细信息,请参见此处 我没有用旧版本的Firefox测试过这个.
由于没有确定的答案(取决于您的需求,例如,您是否需要连字符,您必须支持哪些浏览器？),我通过Adobe BrowserLab进行了一些研究,以找出选项的含义:
如果您不需要连字符,您将获得最佳兼容性<wbr>.如果你需要连字符,那么使用­是你最好的选择,但请注意,这在Firefox 2.0 Mac/Windows或Safari 3.0中不起作用(在char处包装).
并且,请注意,如果您选择不使用溢出,滚动或允许包裹字符来处理长字,IE6和IE7都将通过扩展容器宽度(至少使用DIV我使用的)来响应,所以要小心.
结果:
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
示例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>