css强制换行问题
1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行
#wrap{word-break:break-all; width:200px;}
或者
#wrap{word-wrap:break-word; width:200px;}
abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111
效果:可以实现换行
2.(Firefox浏览器)连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条
#wrap{word-break:break-all; width:200px; overflow:auto;}
abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111
firefox下的一个解决方法:
XBL binding
.wordwrap { -moz-binding: url('./wordwrap.xml#wordwrap'); }
wordwrap.xml的内容:
//
演示地址:http://ecmascript.stchur.com/blogcode/emulating_word_wrap_take2/
如果要通用的,跨浏览器的解决方案就只能用javascript
//aka makeDesignerHappy(dEl);
function breakWord(dEl){
if(!dEl || dEl.nodeType !== 1){
return false;
} else if(dEl.currentStyle && typeof dEl.currentStyle.wordBreak === 'string'){
//Lazy Function Definition Pattern, Peter's Blog
//From http://peter.michaux.ca/article/3556
breakWord = function(dEl){
//For Internet Explorer
dEl.runtimeStyle.wordBreak = 'break-all';
return true;
}
return breakWord(dEl);
}else if(document.createTreeWalker){
//Faster Trim in Javascript, Flagrant Badassery
//http://blog.stevenlevithan.com/archives/faster-trim-javascript
var trim = function (str) {
str = str.replace(/^ss*/, '');
var ws = /s/,
i = str.length;
while (ws.test(str.charAt(--i)));
return str.slice(0, i 1);
}
//Lazy Function Definition Pattern, Peter's Blog
//From http://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 will display
//incorect text-indent with space characters
s = trim( node.nodeValue ) .split('').join(c);
node.nodeValue = s;
}
return true;
}
return breakWord(dEl);
}else{
return false;
}
}
以上代码来自下面这个网址: