关于css样式控制文本折行显示的一点心得

 这两天项目中出现一个bug,就是当用<table>的<td>元素显示一段长文本时，文本内容需要自动折行，代码中通过设置<td>样式word-wrap: break-word;word-break:break-all;来实现折行。但是在Chrome浏览器，IE浏览器中，该设置对于长串的字母、数字和中文文字都是可以生效的，对于长串的标点符号却不生效；在火狐浏览器中该设置对于上述情况都生效。

 

为了解决这个问题，查了一些资料，也试了各种设置，最后发现需要设置<table>的样式style="table-layout:fixed;" 同时将<td>的样式break-word  设置为normal或直接去掉该设置，长串的中英文标点可以实现折行。需要注意的是<table>和<td>需要指定长度（可以设置成百分比），同时<table>必须设置table-layout:fixed

 

如果不用<table>而是用<div>来显示文本，则只要设置word-wrap: break-word; 就可以了，也可以设置成 word-wrap: break-word; word-break：normal；这两种设置效果相同。