好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

table表格中的内容溢出布局方式

什么是内容溢出呢?其实就是当文字很多的时候,如果内容区域只有那么长,那么多出的部分以点点点代替。

这次做的案例是在table里面,我们知道当我们在table里输入过多的文字内容的时候会撑乱表格,例如一行显示过长或者自动换行。可是有的时候我们就想在固定宽度的一行中显示,如果多出的部分那就用点点点代替,这样就不会撑乱表格了。那么该如何做呢?

一般来说我们会用到如下属性

 /*  溢出部分样式  */  
.txt-ell  { 
    white-space : nowrap ;   //强制在一行显示
    overflow : hidden ;     //溢出的内容切割隐藏
    text-overflow : ellipsis ;  //当内联溢出块容器时,将溢出部分替换为…
    word-break : keep-all ;   //允许在单词内换行
    color :  red ;   //这里我自己标识一下
    padding :  0 7px ;   //由于想跟边线留有距离,所以设置了下
 } 

查看更多关于table表格中的内容溢出布局方式的详细内容...

  阅读:32次