原文链接：/jtgln/blog/item/e28291b355703fadd8335a56.html
大家都知道连续的英文或数字能是容器被撑大，不能根据容器的大小自动换行，下面是CSS如何将他们自动换行的方法！对于Div和table以及不同的浏览器，实现css自动换行的方法都稍有不同，下面分别介绍：
对于div
1.（IE浏览器）white-space:normal; word-break:break-all;这里前者是遵循标准。
1 divcssxhtmlxmlExampleSourceCodeExampleSourceCode
2 #wrap {white-space : normal ; width : 200px ; }
3 或者
4 #wrap {word-break : break-all ; width : 200px ; }
5 <divid="wrap">ddd111111111111111111111111111111</div> 效果：可以实现自动换行
2.（Firefox浏览器）white-space:normal; word-break:break-all;overflow:hidden;同样的FF下也没有很好的实现方法，只能隐藏或者加滚动条，当然不加滚动条效果更好！
1 divcssxhtmlxmlExampleSourceCodeExampleSourceCode
2 #wrap {white-space : normal ; width : 200px ; overflow : auto ; }
3 或者
4 #wrap {word-break : break-all ; width : 200px ; overflow : auto ; }
5 <divid="wrap">ddd1111111111111111111111111111111111111111</div> 效果：容器正常，内容隐藏
对于table
1. (IE浏览器)使用样式table-layout:fixed；
1 divcssxhtmlxmlExampleSourceCodeExampleSourceCode
2 <style>
3 .tb {table-layout : fixed }
4 </style>
5 <tableclass="tbl"width="80">
6 <tr><td>
7 abcdefghigklmnopqrstuvwxyz1234567890
8 </td></tr>
9 </table>
10
11 效果：可以自动换行
2.(IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap
1 divcssxhtmlxmlExampleSourceCodeExampleSourceCode
2 < style >
3 .tb {table-layout : fixed }
4 </ style >
5 < table class ="tb" width =80 >
6 < tr >
7 < td width =25% nowrap >
8 abcdefghigklmnopqrstuvwxyz1234567890
9 </ td >
10 < td nowrap > abcdefghigklmnopqrstuvwxyz1234567890 </ td >
11 </ tr >
12 </ table > 效果：两个td均正常自动换行
4.(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div
1 divcssxhtmlxmlExampleSourceCodeExampleSourceCode
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 > abcdefghigklmnopqrstuvwxyz1234567890 </ div >
9 </ td >
10 < td class =td nowrap >< div > abcdefghigklmnopqrstuvwxyz1234567890 </ div ></ td >
11 </ tr >
12 </ table > 这里单元格宽度一定要用百分比定义 效果：正常显示，但不能换行。
注：在FF下还没有能使容器内容换行的好方法，只能用overflow将多出的内容隐藏，以免影响整体效果。
如果觉得《CSS控制连续英文字母和数字强制换行》对你有帮助，请点赞、收藏，并留下你的观点哦！
