在FF中连续英文文本不会自动折行,需要用JavaScript来控制,现在发现这个需求用得还挺广泛,恰好觅到一个使用方便但绝不简单的JavaScript函数,兼容所有浏览器,记之。
功能:
JS函数自动获取容器的大小,把容器内的文字(可为中英文混编)自动排版折行。
使用方法:
// 1. 如果要折行的地方少,就直接把要折行的容器标签传参。
// 2.如果要折行的地方多,就给要折行的容器标签都加个样式2zingfold(当然样式名可变)
// 3.引用JQUERY下的方式,当然JQ库文件必须路径正确文件无误才有效果
/注意:JS应用代码要放在要应用的HTML标签加载完毕之后,建议紧挨着放在</body>前
函数代码:
<script language="javascript"
type="text/javascript" >
//aka makeDesignerHappy(dEl);
function breakWord(dEl){
if(!dEl ||dEl.nodeType !== 1){
return false;
} elseif(dEl.currentStyle && typeofdEl.currentStyle.wordBreak === 'string'){
//Lazy Function Definition Pattern, Peter'sBlog
//Fromhttp://peter.michaux.ca/article/3556
breakWord = function(dEl){
//ForInternet Explorer
dEl.runtimeStyle.wordBreak = 'break-all';
returntrue;
}
return breakWord(dEl);
}elseif(document.createTreeWalker){
//Faster Trim in Javascript, FlagrantBadassery
//http://blog.stevenlevithan.com/archives/faster-trim-javascript
var trim = function
(str){
str =str.replace(/^\s\s*/, '');
var ws =/\s/,
i =str.length;
while(ws.test(str.charAt(--i)));
returnstr.slice(0, i + 1);
}
//Lazy Function Definition Pattern, Peter'sBlog
//Fromhttp://peter.michaux.ca/article/3556
breakWord = function(dEl){
//For Opera,Safari, and Firefox
var dWalker= document.createTreeWalker(dEl, NodeFilter.SHOW_TEXT, null,false);
var node,s,c= String.fromCharCode('8203');
while(dWalker.nextNode())
{
node = dWalker.currentNode;
//we need to trim String otherwise Firefox willdisplay
//incorect text-indent with spacecharacters
s = trim( node.nodeValue ).split('').join(c);
node.nodeValue = s;
}
returntrue;
}
return breakWord(dEl);
}else{
return false;
}
}
</script>
功能:
JS函数自动获取容器的大小,把容器内的文字(可为中英文混编)自动排版折行。
使用方法:
// 1. 如果要折行的地方少,就直接把要折行的容器标签传参。
// 2.如果要折行的地方多,就给要折行的容器标签都加个样式2zingfold(当然样式名可变)
// 3.引用JQUERY下的方式,当然JQ库文件必须路径正确文件无误才有效果
/注意:JS应用代码要放在要应用的HTML标签加载完毕之后,建议紧挨着放在</body>前
函数代码:
<script language="javascript"
</script>