解决 IE Firefox下 字符串不能自动换行（折行）问题

java-boy

昨天遇到了一个问题。是关于如果英文或数字字符串太长，在没有空格等分开的情况下 在网页里不能自动分行的问题（字符串会一直向右延伸，直到超出页面为止）。解决方法要求火狐和IE都要支持。 上网查了一下，查到了几个方法。现在总结一下。

   首先是在网上查到了一种CSS方法，但仔细研究了一下，发现火狐不支持。方法如下：

     使用 word-break:break-all;

  以下是该属性其它值的详细介绍：

   normal:默认值。允许在词间换行
break-all:该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all:与所有非亚洲语言的 normal 相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本

   这个方法由于有局限性，所以我没有采用，只是列在这里。

之后找到了两种方法，可以再Firefox和IE下都工作很好。

  一种是在Div下添加CSS样式。方法如下：

    添加 overflow:hidden;

   该方法可以使超出边界的字符串隐藏起来，避免其破坏页面。理论上这不是一种折行方法，但其可以解决这方面的问题（避免破坏页面效果）。所以也列在这里了。

  最后的方法，是使用javascript编码，将字符串硬分开，使其分行。有点是可以真正的进行很行，缺点是改变字符串结构，在中间加了几个‘ ’ 空格。我觉得网上找到的方法不是很好，自己改了一下。下面是我改写的方法：

   function toBreakWord(aString,intLen){
     var strTemp="";
    while(aString.length>intLen){
      strTemp+=aString.substr(0,intLen)+" ";
      aString=aString.substr(intLen,aString.length);
     }
    strTemp+=" "+aString;
     return strTemp;
   }  
      //if your string is not for "createTextNode" function, you should replace ' ' to 


  注：本文部分引自《在MOZ（firefox）下使没有空格的英文折行》http://space.flash8.net/space/?2248/action_viewspace_itemid_367043.html