本文共 2407 字，大约阅读时间需要 8 分钟。

在一个容器中，如果设定了宽度，一般来说自动换行都是比较正常的，但是如果遇到了连续的英文字符，这个问题就会让人头疼。这不，部门的用户在测试的时候输入连续的字符，就出现了容器被撑大而样式变形的情况发生，怎么解决这个问题呢？

正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行，如下：

html
xmlns="http://www.w3.org/1999/xhtml"
>
    
   
    
    
    
        
字符换行
        
   
            
    div
        
   
    

IE浏览器中，连续的英文字符和阿拉伯数字可以通过word-wrap : break-word ;或者word-break:break-all;实现强制断行：

#wrapper {
    word-break: break-all;
    width: 200px;
}

或者：

#wrapper {
    word-wrap: break-word;
    width: 200px;
}

例如：

   
    abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111
   

效果可以实现换行。

Firefox浏览器中，连续的英文字符和阿拉伯数字的断行问题，Firefox的所有版本都没有解决这个问题，我们只有让超出边界的字符隐藏或者给容器添加滚动条：

#wrapper {
    word-break: break-all;
    width: 200px;
    overflow: auto;
}

例如：

   
    abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111
   

效果：容器正常，内容隐藏。

对于表格：

IE浏览器中，使用 table-layout:fixed;强制表的宽度，多余内容隐藏：

   
        
     
              
abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
         
    
   

效果：隐藏多余内容。

IE浏览器中，使用 table-layout:fixed;强制表的宽度，内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行：

   
        
     
              
abcdefghigklmnopqrstuvwxyz 1234567890
              
abcdefghigklmnopqrstuvwxyz 1234567890
         
    
   

效果：可以换行。

IE浏览器中，在td,th中嵌套div,p等采用上面提到的div,p的换行方法。

Firefox浏览器中，使用 table-layout:fixed;强制表的宽度，内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行，使用overflow:hidden;隐藏超出内容，这里overflow:auto;无法起作用：

   
        
     
              
abcdefghigklmnopqrstuvwxyz1234567890
              
abcdefghigklmnopqrstuvwxyz1234567890
         
    
   

效果：隐藏多于内容。

Firefox浏览器中，在td,th中嵌套div,p等采用上面提到的对付Firefox的方法。

以下是综合代码：

    
   
    
    
    
        
字符换行
        
   
            
    div
        
   
    

IE中，word-wrap : break-word ;：

#wrapper {
    word-wrap: break-word;
    width: 200px;
}

IE中，word-break:break-all;：

#wrapper {
    word-break: break-all;
    width: 200px;
}

Firefox中，word-break:break-all; 和 overflow:auto;：

#wrapper {
    word-break: break-all;
    width: 200px;
    overflow: auto;
}

表格中的td,th嵌套div：

   
        
     
              
            abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
        
              
            abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
        
         
    
   

最终，表格中td嵌套div：

   
        
     
              
            
       
        abcdefghigklmnopqrstuvwxyz1234567890
       
        
              
            
       
        abcdefghigklmnopqrstuvwxyz1234567890
       
        
         
    
   

转载地址：http://fcrkz.baihongyu.com/