有关table报表中的內容外溢合理布局方式

甚么是內容外溢呢?实际上便是当文本许多的情况下,假如內容地区仅有那末长,那末多出的一部分以点点点替代。

这次做的实例是在table里边,大家了解当大家在table里键入过量的文本內容的情况下会撑乱报表,比如1行显示信息太长或全自动换行。但是有的情况下大家就想在固定不动宽度的1行中显示信息,假如多出的一部分那就用点点点替代,这样就不容易撑乱报表了。那末该怎样做呢?

1般来讲大家会用到以下特性

CSS Code拷贝內容到剪贴板
  1. /*外溢一部分款式*/  
  2. .txt-ell {   
  3.     whitewhite-space:nowrap;  //强制性在1行显示信息   
  4.     overflow:hidden;    //外溢的內容激光切割掩藏   
  5.     text-overflow:ellipsis; //当内联外溢块器皿时,将外溢一部分更换为…   
  6.     word-break:keep-all;  //容许在单词内换行   
  7.     colorred;  //这里我自身标志1下   
  8.     padding: 0 7px;  //因为想跟边线留有间距,因此设定了下   
  9. }  
CSS Code拷贝內容到剪贴板
  1. .table-fix {   
  2.     table-layout:fixed;     
  3. }  

最先第2个款式是专业给table标识加的,要想完成內容外溢,那末报表务必有固定不动的宽高,报表內部的tr,td也要有固定不动的宽高。在用內容外溢以前,先要给table加上table-fix这个类。随后查验自身的tr,td有木有给width,假如沒有的话,最好是是给个吧,固定不动的也行,百分比的也行,我关键给的百分比,外边table给固定不动宽度,里边的tr和td便是百分比的宽度,这样才可以应用內容外溢款式。最终假如哪一个格子里边的內容十分的多,你想完成点点点,就给这个格子加上1个.txt-ell的类吧

以上这篇有关table报表中的內容外溢合理布局方式便是网编共享给大伙儿的所有內容了,期待能给大伙儿1个参照,也期待大伙儿多多适用脚本制作之家。

原文详细地址:http://www.cnblogs.com/hanyining/archive/2016/05/25/5527668.html