由于连续的字符（字母、符号、数字）在默认情况下是不换行的，可能会破坏整个界面布局。
那如何解决这个问题呢？
在 IE 和 Safari
1.3+ 下相对比较容易解决，使用 CSS 属性 href=”http://www.w3.org/TR/css3-text/#word-wrap” target=_blank>word-wrap:
break-word;。有朋友会问为什么不是使用 href=”http://www.w3.org/TR/css3-text/#word-break”
target=_blank>word-break:break-all;
，因为有一个特殊的情况，该属性无法解决换行——连续的英文标点符号。
注： href=”http://www.w3.org/TR/css3-text/#word-break”
target=_blank>word-break 主要使用在 CJK
文本，即：中文（Chinese）、日文（Japanese）、韩文（Korean）。
而 Firefox 和 Opera 浏览器，无法识别
word-wrap: break-word; 和 word-break:break-all; 属性。可以通过脚本给连续字符的每个字符之间插入 \ u8203
的字符（该字符在非 IE 浏览下不占据空间），使连续变为了不连续，达到了换行的效果。
breakWord =
function(dEl){
var dWalker =
document.createTreeWalker(dEl, NodeFilter.SHOW_TEXT, null,
false);
var node,s,c =
String.fromCharCode(’8203′);
while
(dWalker.nextNode()){
node =
dWalker.currentNode;
s = trim(
node.nodeValue )
.split(”).join(c);
node.nodeValue
= s;
}
return
true;
}
详细的脚本，可参看 href=”http://www.hedgerwow.com/”>Hedger Wang 整理的脚本 title=”Cross Browser Word Breaker”
href=”http://www.hedgerwow.com/360/dhtml/css-word-break.html”
target=_blank>《Cross Browser Word Breaker》
对于 Firefox
，你还可以通过 target=_blank>XBL bindings 来实现此效果： title=”Emulating CSS word-wrap for Mozilla/Firefox”
href=”http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/”
target=_blank>《Emulating CSS word-wrap for Mozilla/Firefox》
Tags: css
Leave a Reply
You must be logged in to post a comment.