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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

xiaoqb 2016-01-26 16:20:25 浏览2249
展开阅读全文

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

曾经觉得只能通过脚本辅以配置才能比较完美的解决这个问题,这两天才发现原来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

兼容性,目前只测试了 ios

网友评论

登录后评论
0/500
评论
xiaoqb
+ 关注