幽夜 :
在 IE 中可使用style="word-break:break-all"
來解決文章過長的問題,但是在 Mozilla / Firefox 中卻沒有作用,請問該如何解決?
- 關鍵字 : break, 問題, 作用, 中可使用, 中卻, style, Mozilla, Firefox
幽夜 :
在 IE 中可使用所以我猜想這可能是 Firefox 一直沒有支援 word-break 的原因吧!
一般的解決方法可以用 Div 配合 style="overflow:hidden;" 的樣式來維持被撐大的頁面。
另外一樣方法可以用 JavaScript 配會 class 標籤來修正被撐大的頁面來達到類似 word-break 的效果。
function breakWord(dEl){
if(!dEl || dEl.nodeType !== 1){return false;}
else if(dEl.currentStyle && typeof dEl.currentStyle.wordBreak === 'string'){
breakWord = function(dEl){
dEl.runtimeStyle.wordBreak = 'break-all';
return true;
}
return breakWord(dEl);
}
else if(document.createTreeWalker){
var trim = function(str){
var strstr = str.replace(/^\s\s*/, ''),
ws = /\s/,
i = str.length;
while (ws.test(str.charAt(--i)));
return str.slice(0, i 1);
}
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;
}
return breakWord(dEl);
}
else{return false;}
}
var aEl = document.getElementsByTagName('div');
var dEl,i;
var sName = "break-word";
var oReg = new RegExp('(\\s|^)' sName '(\\s|$)');
for(i=0;dEl = aEl[i];i ){
if(dEl.className.match(oReg)){breakWord(dEl);}
}
記得這段 Javascript 必須加載在網頁的尾端才會有作用唷!