Forum

Heyxu Forum

Forum Dictionary / Programming / 網頁/網站程式 / CSS /

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

New Subject
Random
Previous
Next
|
如何解決 word-break 樣式無法在 Mozilla 中使用的問題

在 IE 中可使用
style="
word-break:break-all"
來解決文章過長的問題,但是在 Mozilla / Firefox 中卻沒有作用,請問該如何解決?
  • Keywords : 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


  • Now, you can post comments by Facebook Account when your Heyxu account was logout or unvariable. whatever, we suggest to post comment by Heyxu Account to get more bounds to join new events of Heyxu
Comment
Verify
Comment
  • Auto Platform
    For better browsing experience, it will auto detects your device to display webpage.
  • Bug Report
    Tell us about the idea, problem and errors you found.
  • Copyright
    © 2009 Heyxu Multimedia, Inc - All rights reserved.
  • Revised Version
    V2.1.356
    15 Jul 2019 (GMT+8)