羊皮紙論壇目錄 / 程式設計 / 網頁/網站程式 / 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 登入來發表迴響。若使用羊皮紙會員身份發表迴響則可獲得經驗值及虛擬金幣,用來參加羊皮紙推出的活動。
發表迴響
 
驗證字串