羊皮紙 服務
       
       
      分享
       
      羊皮紙論壇

      羊皮紙論壇

      分享讓知識傳播,閱讀讓心靈成長, 創作讓文化傳承,讓我們共同努力。
      • 禁止廣告文
      • 知識傳播
      • 閱讀
      • 心靈成長
      • 創作
      • 文化傳承
      羊皮紙論壇目錄 / 程式設計 / 網頁/網站程式 / CSS /

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

      發表新主題
      隨機主題
      上個主題
      下個主題
      |
      如何解決 word-break 樣式無法在 Mozilla 中使用的問題

      在 IE 中可使用
      style="
      word-break:break-all"
      來解決文章過長的問題,但是在 Mozilla / Firefox 中卻沒有作用,請問該如何解決?
      • 關鍵字 : break, 問題, 作用, 中可使用, 中卻, style, Mozilla, Firefox
      0 0
      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 必須加載在網頁的尾端才會有作用唷!

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


      • 當您未登入羊皮紙時,可以利用臉書 Facebook 登入來發表迴響。若使用羊皮紙會員身份發表迴響則可獲得經驗值及虛擬金幣,用來參加羊皮紙推出的活動。
      發表迴響
       
      驗證字串

      Facebook 粉絲專頁

      QRCode 條碼 & APP 連結

      說明
      本頁網址

      在相關服務標籤中,『掃描條碼,在行動裝置』或是『點擊連結按鈕,在本裝置』中開啟網頁或是 APP 相關操作。
      QRCode