网页中防止表格被撑破的css代码
更新时间:2007年03月28日 00:00:00 作者:
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud)
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
按照网上大多数文章的说法,只要在CSS中加入:
代码
table {
table-layout:fixed;
word-break:break-all;
word-wrap:break-word;
}
div {
word-break:break-all;
word-wrap:break-word;
}
就可以解决表格和层被撑破,最初我也是这样做的。不过这样的代码会造成一个问题,你会发现英文词全部被截断了,这不符合英语的书写习惯也不利于阅读。
后来我发现上述代码改写一下就可以做到既防止表格/层撑破又防止单词断裂了。
如下:
代码
table {
table-layout: fixed;
word-wrap:break-word;
}
div {
word-wrap:break-word;
}
代码
table {
table-layout:fixed;
word-break:break-all;
word-wrap:break-word;
}
div {
word-break:break-all;
word-wrap:break-word;
}
就可以解决表格和层被撑破,最初我也是这样做的。不过这样的代码会造成一个问题,你会发现英文词全部被截断了,这不符合英语的书写习惯也不利于阅读。
后来我发现上述代码改写一下就可以做到既防止表格/层撑破又防止单词断裂了。
如下:
代码
table {
table-layout: fixed;
word-wrap:break-word;
}
div {
word-wrap:break-word;
}
最新评论