关于文本自动“换行”

参考文章：http://ued.taobao.com/blog/2010/10/14/research-of-word-wrap/

定义：当文本的长度大于容器宽度的时候，文本自动换行。

对于中文，以及一般的英文单词，不会出现什么问题。

一般出问题的是长串无分隔的英文单词或字符串，有以下几种情况：

1、一般情况（无浮动 ; 无display：inline-block;）

　　这种情况最好处理，只要加word-wrap: break-word;即可。

2、文本外容器有浮动，或者有display:inline-block;

　　对于非FF浏览器，word-wrap:break-word; word-break:break-all;即可；

　　对于FF浏览器，由于不能识别word-break:break-all;故此法无效，两种办法：

　　法1：看下浮动或者display:inline-block;是否必须，如果非必须，去掉即可；如果必须，那么单纯依靠css就达不到这个目的了，求助于JS吧。

　　法2：js实现，但是对于这种方法有一定的局限性，只适用于纯文本的情况。如果想要在文本段中包含其他html标签就会有问题。比如说，如果包含标签<span></span>，以使得该标签中的文本可以被修饰，如果折断处刚好在标签内部，则该标签就会被破坏，从而变成无意义字符。

参考的js代码如下（参考网上代码）：

<script>
function toBreakWord(intLen){
var obj=document.getElementById("ff");
var strContent=obj.innerHTML;
var strTemp="";
while(strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+"
";
strContent=strContent.substr(intLen,strContent.length);
}
strTemp+="
"+strContent;
obj.innerHTML=strTemp;
}
if(document.getElementById && !document.all)
toBreakWord(37)
</script>

3、table布局（FF情况）

　　对于table布局的，此时有个好处，只要在给某一列/行设置了word-wrap:break-word;overflow:hidden;之后，再给该table设置table-layout:fixed;即可达到自动换行效果。

【小结】

目前，还没有一个十分完美的方法来解决FF下的该问题，好在这种情况在设计合理，并且在输入的时候注意有效性之后，比较少见。

个人能力所限，考虑情况不周全，所想办法有待完善。