最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
css防止表格被内容撑破的方法
时间:2022-06-25 10:02:59 编辑:袖梨 来源:一聚教程网
第一种情况是表格被英文单词撑破了。
解决办法是在表格的属性里设置style="word-wrap:break-word;"
但其实还是有问题。当往表格里装一长串的英文字母时,表格还是会被撑破。这就是第2种情况了
解决办法是在表格风格属性里再加一个属性。style="word-wrap:break-word;word-break:break-all;"
但还有一种情况。当往表格里放一张被表格大得多的图片时,表格照样还是被撑破了。
解决办法有2种,第一种。把表格的风格设置为:
style="overflow-x:no; word-wrap:break-word; word-break:break-all;TABLE-LAYOUT: fixed;"
记得要为表格设置宽度大小,但TABLE-LAYOUT: fixed设置了的话,对于表格布局将会很困难,推荐使用第2种解决办法。
第二种解决办法是从图片本身入手
给图片的风格属性设置为
style="max- width:expression(this.width > 500 ? "500px" : this.width)"
后来我发现上述代码改写一下就可以做到既防止表格/层撑破又防止单词断裂了。
代码
table {
table-layout: fixed;
word-wrap:break-word;
}
div {
word-wrap:break-word;
}
补充
table {
word-break:break-all;
word-wrap:break-word;
}
img {
max-
width:expression(this.width > 500 ? "500px" : this.width)
}
补充:
语法:
word-break : normal | break-all | keep-all
参数:
normal : 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本
语法:
word-wrap : normal | break-word
参数:
normal : 允许内容顶开指定的容器边界
break-word : 内容将在边界内换行。如果需要,词内换行(word-break)也行发生
说明:
设置或检索当当前行超过指定容器的边界时是否断开转行。
语法:
table-layout : auto | fixed
参数:
auto : 默认的自动算法。布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来。速度很慢
fixed : 固定布局的算法。在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关
相关文章
- 王者荣耀S38赛季有什么更新 12-25
- 王者荣耀S38赛季有什么更新 王者荣耀S38赛季更新内容介绍 12-25
- 世界之外12.25有什么更新 世界之外12月25日更新内容介绍 12-25
- 光遇12.25红石碎片在哪里 光遇12月25日红石碎片位置攻略 12-25
- 奇迹暖暖绚光引途第二天怎么玩 绚光引途day2庆祝之舞搭配攻略 12-25
- 无限暖暖拍照打卡位置在哪里 无限暖暖世界巡游位置全攻略 12-25