关于table表格中的内容溢出布局方法

来源:爱站网时间:2020-04-16编辑:网友分享
网页设计的表格中,内容溢出是很常见的,但是每个显示内容的布局也是不一样的,那么关于table表格中的内容溢出布局方法,大家都了解吗?下面爱站技术频道带我们来看看。

网页设计的表格中,内容溢出是很常见的,但是每个显示内容的布局也是不一样的,那么关于table表格中的内容溢出布局方法,大家都了解吗?下面爱站技术频道带我们来看看。

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

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

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

CSS Code复制内容到剪贴板
  1. /*溢出部分样式*/  
  2. .txt-ell {   
  3.     whitewhite-space:nowrap;  //强制在一行显示   
  4.     overflow:hidden;    //溢出的内容切割隐藏   
  5.     text-overflow:ellipsis; //当内联溢出块容器时,将溢出部分替换为…   
  6.     word-break:keep-all;  //允许在单词内换行   
  7.     colorred;  //这里我自己标识一下   
  8.     padding: 0 7px;  //由于想跟边线留有距离,所以设置了下   
  9. }  
CSS Code复制内容到剪贴板
  1. .table-fix {   
  2.     table-layout:fixed;     
  3. }  

首先第二个样式是专门给table标签加的,想要实现内容溢出,那么表格必须有固定的宽高,表格内部的tr,td也要有固定的宽高。在用内容溢出之前,先要给table添加table-fix这个类。然后检查自己的tr,td有没有给width,如果没有的话,最好是给个吧,固定的也行,百分比的也行,我主要给的百分比,外边table给固定宽度,里面的tr和td就是百分比的宽度,这样才能使用内容溢出样式。最后如果哪个格子里面的内容非常的多,你想实现点点点,就给这个格子添加一个.txt-ell的类吧

上述是爱站技术频道给大家带来的关于table表格中的内容溢出布局方法,我们可以根据项目的需求进行选择或者改进。

上一篇:提高网站访问速度的技巧

下一篇:XHTML标签的嵌套规则分析

您可能感兴趣的文章

相关阅读

热门软件源码

最新软件源码下载