如何简单有效的隐藏超出长度的多行文本呢?
曾经觉得只能通过脚本辅以配置才能比较完美的解决这个问题,这两天才发现原来webkit浏览器中已经有完美的解决方案了。
这篇文章介绍了隐藏多行文本的几种方式。下面介绍下webkit浏览器中纯css的解决方案。
.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
look,就这么简单。 -webkit-line-clamp: n;
表示超过n行后的内容被隐藏,并用省略号替代超长的内容。
使用之前是这样的:

服用以后是这样的:

兼容性,目前只测试了 ios7 (iphone5s) 和 android 4.3(红米1s)。如果其他设备不支持,可以考虑增加height
,配合overflow降级使用也是极好的~
该文章来自于阿里巴巴技术协会(ATA)
作者:阿克
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。