如何优雅的控制文本显示行数-阿里云开发者社区

开发者社区> 云计算> 正文
登录阅读全文

如何优雅的控制文本显示行数

简介:

如何简单有效的隐藏超出长度的多行文本呢?

曾经觉得只能通过脚本辅以配置才能比较完美的解决这个问题,这两天才发现原来webkit浏览器中已经有完美的解决方案了。

这篇文章介绍了隐藏多行文本的几种方式。下面介绍下webkit浏览器中纯css的解决方案。

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden; // overflow 才能将超过的内容真正隐藏,否则内容还是能看得见
}

look,就这么简单。 -webkit-line-clamp: n;表示超过n行后的内容被隐藏,并用省略号替代超长的内容。

使用之前是这样的:

before

服用以后是这样的:

after

兼容性,目前只测试了 ios7 (iphone5s) 和 android 4.3(红米1s)。如果其他设备不支持,可以考虑增加height,配合overflow降级使用也是极好的~

该文章来自于阿里巴巴技术协会(ATA

作者:阿克

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
云计算
使用钉钉扫一扫加入圈子
+ 订阅

时时分享云计算技术内容,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

其他文章