只显示任意行文字

当文字内容太长的时候一个常见的需求就是隐藏超出的文字内容,一般是让文字只显示若干行。

但是css中并没有一个标准属性可以简单方便的做到这一点,所以这种效果一般都是各凭本事。这里简单总结一下常见的几种。

方法一

pure css, 通过简单的line-height和max-height设置,缺点就是没有ellipsis的省略号效果。

1
2
3
4
5
.overflow {
line-height: 1.1em;
max-height: 2.2em;
overflow: hidden;
}

方法二

also pure css, 不过比较黑科技而且不是标准属性,在webkit内核的浏览器还可以战一战。

1
2
3
4
5
6
.overflow {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

这个方法很奇怪,限制行数还要引入flex布局,还是最老的已经被废弃的flex语法(虽然大多浏览器还支持,尤其是移动端),而且-webkit-line-clamp也不是标准属性,比如firefox就不支持它。不过在移动端webkit内核占主体的场景下可以用下。而且,这种写法超出部分是有省略效果的。

方法三

使用js实现。

列几个库吧。。。

online demo => 最好启用模拟移动设备

参阅