宽度自适应，连续英文字母自动换行，兼容ie6-8，firefox，chrome_HTML+CSS

导读：1、如果固定宽度，实现自动换行的话，就简单的多了，你只要给需要自动折行的元素加上以下几句css代码即可。word-break:break-all;word-wrap...

1、如果固定宽度，实现自动换行的话，就简单的多了，你只要给需要自动折行的元素加上以下几句css代码即可。

word-break:break-all; word-wrap:break-word;width:200px

2、可是如果宽度需要自适应、显示数据用的table、连续英文字符需要自动折行，如果你还是仅仅使用上面的方法就会有各种不兼容。但是，亲，福利来了。使劲儿把下面的代码复制到你的项目中吧，保证你无后顾之忧。。。

HTML代码

<table>

    <tr>

        <td class="col1"><p>cxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxc</p></td>

        <td class="col2">cxc</td>

    </tr>

</table>

CSS代码

table{border-collapse:collapse; width:100%;}

td{border:1px solid #000;}

.col1{ width:100%;}

td p{word-break:break-all; word-wrap:break-word;display:table;table-layout:fixed;width:100%; }

全站搜索

宽度自适应，连续英文字母自动换行，兼容ie6-8，firefox，chrome

最新推荐

本周排行