超出两行自动显示省略号

温故而知新

皓眸大前端开发学习
经常有需求一段文字展示时,单行超出自动折行,超出两行则末尾展示省略号。
css写单行超出显示省略号,可以复习下,这个很常用。

1
2
3
4
width: 3rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

这种两行的文字,用纯css截取,移动端下载也ok了,iOS的我测了ok,安卓的只测试了小米,魅族,三星的部分机型,是否很符合规范大家可以去查查文档之类的,但是效果确实实现了啊,代码如下:

1
2
3
4
5
6
overflow: hidden;
text-overflow: ellipsis;
display: box;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

谢谢!

转载请注明出处:http://www.haomou.net/2016/12/10/2016_twoline/
有问题请留言。T_T 皓眸大前端开发学习 T_T