firefox下的英文强制断行

21st 12月 2007, 01:41 下午

做网页的人或多火烧都知道firefox很恶心的一个地方就是当连续一段英文字母出现的时候没有办法让他强制断行，而IE，safari等浏览器却可以，试了下firefox3还是没有改进。那有没有办法让FF里连续英文字母也强行断行呢？答案是肯定的，而且方法很多，在蓝色经典上有这样一个办法：

  1. <style type="text/css">
  2. /*<![CDATA[*/
  3. div {
  4.     width:300px;
  5.     word-wrap:break-word;
  6.     border:1px solid red;
  7.     }
  8. /*]]>*/
  9. </style>
  10. <div id="ff">aaaaaaaaaaaaaaaaaaa...</div>
  11. <script type="text/javascript">
  12. // <![CDATA[
  13. function toBreakWord(intLen){
  14. var obj=document.getElementById("ff");
  15. var strContent=obj.innerHTML; 
  16. var strTemp="";
  17. while(strContent.length>intLen){
  18. strTemp+=strContent.substr(0,intLen)+"&#10;"; 
  19. strContent=strContent.substr(intLen,strContent.length); 
  20. }
  21. strTemp+="&#10;"+strContent;
  22. obj.innerHTML=strTemp;
  23. }
  24. if(document.getElementById  &&  !document.all)  toBreakWord(37)
  25. // ]]>
  26. </script>

这段代码可以让id为ff的标签里的英文自动断行，原理是在指定位置插入空格来实现的，但是这种方法有很多弊端，第一，他只能用在唯一的地方；第二，要预先算出需要断行的位置。不是很方便，那么遇到下面这种情况他就没办法处理了。

  1. <table width="100%">
  2. <tr>
  3. <th width="10%">aaaaaaaaaaaaaaaaaaaaaaaaaaa..</th>
  4. <th width="10%">aaaaaaaaaaaaaaaaaaaaaaaaaaaa..</th>
  5. <th width="30%">aaaaaaaaaaaaaaaaaaaaaaaaaaaa..</th>
  6. <th width="60%">dffffffffffffffffffffffffffffffffff...</th>
  7. </tr>
  8. </table>

可以看到这段代码里面没有任何ID，唯一能识别身份的就是标签本身了，我们将上面的代码稍作改进，再借助jquery就能实现FF下的强行断行了。

  1. <style type="text/css">
  2. th {
  3.    
  4.     word-break:break-all;
  5.     border:1px solid red;
  6.     }
  7. </style>
  8. <script type="text/javascript" src="js/jquery-1.2.1.js"></script>
  9. <script type="text/javascript">
  10.                 $(document).ready(function (){if(document.getElementById  &&  !document.all){
  11.                 var intLen = 1;
  12.                 var tagName = document.getElementsByTagName("th");
  13.                 for(var i = 0;i < tagName.length;i ++){
  14.                     var strContent = tagName[i].innerHTML;
  15.                     var strTemp = "";
  16.                     while(strContent.length > intLen){
  17.                         strTemp += strContent.substr(0,intLen)+"&#8203;"; 
  18.                         strContent = strContent.substr(intLen,strContent.length);
  19.                         }
  20.                     strTemp += "&#8203;"  +strContent;
  21.                     tagName[i].innerHTML = strTemp;
  22.                     }
  23.                 }
  24.                 });
  25. </script>

实现原理还是一样，不过这里采用的不是在指定位置插入空格，而是采用了​，这是一个不被浏览器显示的字符但是却有空格的功效，将其插入到每个字母后面，这样相当于在每个字符后面加了个空格但是却显示不出来，就可以实现在任意位置断行了。但是在IE下却会出现莫名其妙的错误，它对​的处理和其他浏览器不一样，所以加一句if(document.getElementById && !document.all)不让IE执行这段JS，让他用CSS去断行吧。
查看演示

分类： js笔记  |  评论