css文本多行溢出隐藏和显示省略号

转载 (原文地址) prima 随笔 css 141阅读 2018-06-21 17:42:33 举报

overflow:hidden; //超出的文本隐藏

text-overflow:ellipsis; //溢出用省略号显示

white-space:nowrap; //溢出不换行

css3提供了解决了这个问题方法:

display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。

-webkit-box-orient:vertical; //从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式)

-webkit-line-clamp:2; //这个属性不是css的规范属性,需要组合上面两个属性,表示显示2行。

3行溢出隐藏 css的样式如下:
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复