论坛目录 / 程式设计 / 网页/网站程式 / CSS /

如何解决 word-break 样式无法在 Mozilla 中使用的问题

发表新主题
随机主题
上个主题
下个主题
|
    如何解决 word-break 样式无法在 Mozilla 中使用的问题

    ???在 IE 中可使用
    style="
    word-break:break-all"
    来解决文章过长的问题,但是在 Mozilla / Firefox 中却没有作用,请问该如何解决?
    • 关键字 : break, 请问该如何解决, 来解决文章过长, style, Mozilla, Firefox
    00
    2008-11-15T04:24:04+0000
    ???其实 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 必须加载在网页的尾端才会有作用唷!

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


    • 当您未登入羊皮纸时,可以利用脸书 Facebook 登入来发表回响。若使用羊皮纸会员身份发表回响则可获得经验值及虚拟金币,用来参加羊皮纸推出的活动。
    发表回响
     
    验证字串
    留言