本文介绍了如果需要，如何允许文本包装在单词内？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在寻找最好的解决方案，允许文字包装在一个词的中间，如果必要。
如果标记看起来比我更好，那么它也会有帮助。
请注意，这是专门为用户定义的，
大约25％的Firefox使用者该网站仍在使用v3.0或更低版本，因此它是至关重要的支持他们。
解决方案
因为没有确定的答案（取决于你的需求，例如，你想要连字符，你必须支持什么浏览器？），我通过查找选项：
如果您不需要连字符，则使用< wbr> ; 。如果你需要连字符，那么使用& shy; 是你最好的选择，但请注意，这不会工作（包裹在字符）在Firefox 2.0 Mac / Windows或Safari 3.0。
注意，如果你选择不使用溢出处理长字，滚动或允许换行符，IE6和IE7都会响应扩展容器宽度（至少使用我使用的 DIV ），因此要小心。
浏览器方法包裹在char添加Hyphens水平溢出容器水平扩展
- -------------------------------------------------- -------------------------------------------------- -----------------------------------------
Firefox 3.0 - Windows XP无否否是否
Firefox 3.0 - Windows XP< wbr>是否否否
Firefox 3.0 - Windows XP& shy;或&＃173;是是否否
Firefox 3.0 - Windows XP换行：break-word 否否是否
IE7 - Windows XP无否否否是
IE7 - Windows XP< wbr>是否否否
IE7 - Windows XP& shy;或&＃173;是是否否
IE7 - Windows XP word-wrap：break-word是否否否
Firefox 3.0 - OS X无否否是否
Firefox 3.0 - OS X< wbr>是否否否
Firefox 3.0 - OS X& shy;或&＃173;是是否否
Firefox 3.0 - OS X换行：break-word 否否是否
Safari 3.0 - OS X无否否是否
Safari 3.0 - OS X< wbr>是否否否
Safari 3.0 - OS X& shy;或&＃173; 否否否否
Safari 3.0 - OS X换行：break-word是否否否
Chrome 3.0 - Windows XP无否否是否
Chrome 3.0 - Windows XP< wbr>是否否否
Chrome 3.0 - Windows XP& shy;或&＃173;是是否否
Chrome 3.0 - Windows XP换行：break-word是否否否
Firefox 2.0 - OS X无否否是 No
Firefox 2.0 - OS X< wbr>是否否否
Firefox 2.0 - OS X& shy;或&＃173; 否否是否是否
Firefox 2.0 - OS X换行：break-word 否否是 No
Firefox 2.0 - Windows XP无否否是否
Firefox 2.0 - Windows XP< wbr>是否否否
Firefox 2.0 - Windows XP& shy;或&＃173; 否否是否是否
Firefox 2.0 - Windows XP换行：break-word 否否是 No
Firefox 3.5 - Windows XP无否否是否
Firefox 3.5 - Windows XP< wbr&是否否否
Firefox 3.5 - Windows XP& shy;或&＃173;是是否否
Firefox 3.5 - Windows XP word-wrap：break-word是否否否
Firefox 3.5 - OS X无否否是 No
Firefox 3.5 - OS X< wbr>是否否否
Firefox 3.5 - OS X& shy;或&＃173;是是否否
Firefox 3.5 - OS X换行：break-word是否否否
IE6 - Windows XP无否否否是
IE6 - Windows XP< wbr>是否否否
IE6 - Windows XP& shy;或&＃173;是是否否
IE6 - Windows XP文字换行：break-word是否否否
IE8 - Windows XP无否否是否
IE8 - Windows XP< wbr>是否否否
IE8 - Windows XP& shy;或&＃173;是是否否
IE8 - Windows XP换行：break-word是否否否
Safari 4.0 - OS X无否否是否
Safari 4.0 - OS X< wbr>是否否否
Safari 4.0 - OS X& shy;或&＃173;是是否否
Safari 4.0 - OS X字换行：break-word是否否否
示例HTML：
< html&
< head>
< style>
div {
width：4em;
border：1px solid black;
margin-bottom：6em;
padding：.25em;
}
< / style> ;,
< / head>
< body>
这是DIV容易包含的文本：
< div>正确宽度< / div>
没有字符断开的长字：
< div>
AReallyLongWordThatNeedsToBeBroken AndAnotherWord
< / div>
< i>& lt; wbr& gt;< / i>标签：
< div>
A< wbr> R< wbr> e< wbr> a< wbr> l< wbr> l< wbr> y< wbr> L< wbr> o< wbr> n< w br& wbr> wbr> wbr> w wbr> w w w w w w w T wbr>< wbr>< wbr>< wbr>< wbr> b< wbr> ; wbr> n< wbr>< wbr> t< wbr> h< wbr> w> r< wbr> w< wbr&
< i>& amp; shy;< / i>字符：
< div>
A& shy; R& shy; e& shy; a& shy; l& shy; l& shy; y& shy; L& shy; o& shy; n& shy; g& shy; y;;;;;;;;;;;;;;;;;;;;;;;;;;;; amp y amp amp amp amp amp amp amp amp amp amp amp amp amp amp amp amp amp amp amp amp amp amp amp amp ; shy; n& shy; o& shy; t& shy; h& shy; e& shy; r& shy; W& shy; o& shy; r& shy; d
< / div>
< i> overflow：scroll< / i> CSS属性：
< div style =overflow：scroll>
AReallyLongWordThatNeedsToBeBroken AndAnotherWord
< / div>
< i> word-wrap：break-word< / i> CSS属性：
< div style =word-wrap：break-word>
AReallyLongWordThatNeedsToBeBroken AndAnotherWord
< / div>
< / body>
< / html>
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).
解决方案
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>
这篇关于如果需要，如何允许文本包装在单词内？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！