首页 > 其他 > 详细

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

时间:2014-01-16 23:31:03      阅读:540      评论:0      收藏:0      [点我收藏+]

在谷歌或者百度上搜索”css 自动换行“,你会找到很多坨与之相关的信息。

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

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

 

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

HTML代码

bubuko.com,布布扣
<table>
    <tr>
        <td class="col1"><p>cxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxccxc</p></td>
        <td class="col2">cxc</td>
    </tr>
</table>
bubuko.com,布布扣

CSS代码

bubuko.com,布布扣
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%; }
bubuko.com,布布扣

 

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

原文:http://www.cnblogs.com/chenxc/p/2651016.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!