一聚教程网:一个值得你收藏的教程网站

热门教程

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 :  固定布局的算法。在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关

热门栏目