如何解决 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