Limit text height to n lines
只显示任意行文字
当文字内容太长的时候一个常见的需求就是隐藏超出的文字内容,一般是让文字只显示若干行。
但是css中并没有一个标准属性可以简单方便的做到这一点,所以这种效果一般都是各凭本事。这里简单总结一下常见的几种。
方法一
pure css, 通过简单的line-height和max-height设置,缺点就是没有ellipsis的省略号效果。
1 | .overflow { |
方法二
also pure css, 不过比较黑科技而且不是标准属性,在webkit内核的浏览器还可以战一战。
1 | .overflow { |
这个方法很奇怪,限制行数还要引入flex布局,还是最老的已经被废弃的flex语法(虽然大多浏览器还支持,尤其是移动端),而且-webkit-line-clamp也不是标准属性,比如firefox就不支持它。不过在移动端webkit内核占主体的场景下可以用下。而且,这种写法超出部分是有省略效果的。
方法三
使用js实现。
列几个库吧。。。
- clamp.js
- jquery.autoellipsis
- jQuery.dotdotdot (这个商用要钱的。。)
online demo => 最好启用模拟移动设备