如何解決 word-break 樣式無法在 Mozilla 中使用的問題

幽夜 :

在 IE 中可使用
style="word-break:break-all"
來解決文章過長的問題，但是在 Mozilla / Firefox 中卻沒有作用，請問該如何解決？

• 關鍵字 : break, 問題, 作用, 中可使用, 中卻, style, Mozilla, Firefox

2008-11-15T04:24:04+0000

魚戀秋波 Neil Y.K. :

其實 word-break 的用途是 IE 在於英文書寫上的斷字功能，在正常的書寫習慣裡是不會有斷字的問題，只是基於一些原因，例如連續的英文字母或是數字組合 hahahahahahahaha 123456789123456789 這樣的組合在英文書寫上是不會自動斷字的，因為它被斷字後所表示的意義可能會跟未斷字前全然不同。

所以我猜想這可能是 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 必須加載在網頁的尾端才會有作用唷！

2008-11-15T06:50:29+0000