CSS控制连续英文字母和数字强制换行

原文链接：http://hi.baidu.com/jtgln/blog/item/e28291b355703fadd8335a56.html

大家都知道连续的英文或数字能是容器被撑大，不能根据容器的大小自动换行，下面是CSS如何将他们自动换行的方法！对于Div和table以及不同的浏览器，实现css自动换行的方法都稍有不同，下面分别介绍：

对于div

1.（IE浏览器）white-space:normal; word-break:break-all;这里前者是遵循标准。

1  div css xhtml xml Example Source Code Example Source Code
2  #wrap { white-space : normal ;  width : 200px ;   }
3  或者
4  #wrap { word-break : break-all ; width : 200px ; }
5  <div id="wrap">ddd111111111111111111111111111111</div>

效果：可以实现自动换行

2.（Firefox浏览器）white-space:normal; word-break:break-all;overflow:hidden;同样的FF下也没有很好的实现方法，只能隐藏或者加滚动条，当然不加滚动条效果更好！

1  div css xhtml xml Example Source Code Example Source Code
2  #wrap { white-space : normal ;  width : 200px ;  overflow : auto ; }
3  或者
4  #wrap { word-break : break-all ; width : 200px ;  overflow : auto ;   }
5  <div id="wrap">ddd1111111111111111111111111111111111111111</div>

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

对于table

1. (IE浏览器)使用样式table-layout:fixed；

 1  div css xhtml xml Example Source Code Example Source Code
 2  <style>
 3  .tb { table-layout : fixed }
 4  </style>
 5  <table class="tbl" width="80">
 6  <tr><td>
 7  abcdefghigklmnopqrstuvwxyz 1234567890
 8  </td></tr>
 9  </table>
10 
11 

效果：可以自动换行

2.(IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap

 1  div css xhtml xml Example Source Code Example Source Code
 2  < style >
 3  .tb { table-layout : fixed }
 4  </ style >
 5  < table  class ="tb"  width =80 >
 6  < tr >
 7  < td  width =25%  nowrap >
 8  abcdefghigklmnopqrstuvwxyz 1234567890
 9  </ td >
10  < td  nowrap > abcdefghigklmnopqrstuvwxyz 1234567890 </ td >
11  </ tr >
12  </ table >

效果：两个td均正常自动换行

4.(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div

 1  div css xhtml xml Example Source Code Example Source Code
 2  < style >
 3  .tb  { table-layout : fixed }
 4  .td  { overflow : hidden ; }
 5  </ style >
 6  < table  class =tb  width =80 >
 7  < tr >< td  width =25%  class =td  nowrap >
 8  < div > abcdefghigklmnopqrstuvwxyz 1234567890 </ div >
 9  </ td >
10  < td  class =td  nowrap >< div > abcdefghigklmnopqrstuvwxyz 1234567890 </ div ></ td >
11  </ tr >
12  </ table >

这里单元格宽度一定要用百分比定义 效果：正常显示，但不能换行。

注：在FF下还没有能使容器内容换行的好方法，只能用overflow将多出的内容隐藏，以免影响整体效果。