羊皮纸论坛目录 / 程式设计 / 网页/网站程式 / 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 登入来发表回响。若使用羊皮纸会员身份发表回响则可获得经验值及虚拟金币,用来参加羊皮纸推出的活动。
发表回响
 
验证字串