宽度自适应,连续英文自动换行【兼容IE6、IE7、IE8、firefox、chrome】

1、如果固定宽度,实现自动换行的话,就简单的多了,你只要给需要自动折行的元素加上以下几句css代码即可。
word-break:break-all;word-wrap:break-word;width:200px
2、可是如果宽度需要自适应、显示数据用的table、连续英文字符需要自动折行,如果你还是仅仅使用上面的方法就会有各种不兼容。但是亲福利来了,使劲儿把下面的代码复制到你的项目中吧,保证你无后顾之忧...

HTML代码
<table> 
    <tr> 
        <td class="col1"><p>ecshopcxecshopcxecshopcxecshopcxecshopcxecshopcxecshopcxecshopcxecshopcxecshopcxecshopcxecshopcxecshopcxecshopcxecshopcxecshopcxecshopcxecshopcxecshopcx</p></td> 
        <td class="col2">ecshopcx</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%}

本文原创地址:https://www.ecshop.cx/article-570.html
版权所有 © 转载时必须以链接形式注明出处!

觉得本文对您有用,想收藏下来!方法很简单:请点击-〉
我们一直坚持白天工作、晚上熬夜更新资源,付出了巨大的精力和时间,其中的辛酸难以言述。

实时购买动态 ×

高冷男帝~会员 在 2019-07-20 购买了 ECSHOP一键发货带查看快递物流跟踪【实现订单快速发货+仿淘宝查看物流】