你的位置:首页 > 软件开发 > 网页设计 > table表格中的内容溢出布局方式

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

发布时间:2016-05-25 18:00:09
什么是内容溢出呢?其实就是当文字很多的时候,如果内容区域只有那么长,那么多出的部分以点点点代替。这次做的案例是在table里面,我们知道当我们在table里输入过多的文字内容的时候会撑乱表格,例如一行显示过长或者自动换行。可是有的时候我们就想在固定宽度的一行中显示,如果多出的部分 ...

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

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

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

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

原标题:table表格中的内容溢出布局方式

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录