Html-Table表格中,字溢出撑破表格的处理
1. /*溢出部分样式*/
2.
.txt-ell {
3.
whitewhite-space:nowrap; //强制在一行显示
4.
overflow:hidden; //溢出的内容切割隐藏
5.
text-overflow:ellipsis; //当内联溢出块容器时,将溢出部分替换为…
6.
word-break:keep-all; //允许在单词内换行
7.
color: red; //这里我自己标识一下
8.
padding: 0 7px; //由于想跟边线留有距离,所以设置了下
9.
}
10.
.table-fix {
11.
table-layout:fixed;
12.
}
首先第二个样式是专门给table标签加的,想要实现内容溢出,那么表格必须有固定的宽高,表格内部的tr,td也要有固定的宽高。在用内容溢出之前,先要给table添加table-fix这个类。然后检查自己的tr,td有没有给width,如果没有的话,最好是给个吧,固定的也行,百分比的也行,我主要给的百分比,外边table给固定宽度,里面的tr和td就是百分比的宽度,这样才能使用内容溢出样式。最后如果哪个格子里面的内容非常的多,你想实现点点点,就给这个格子添加一个.txt-ell的类吧