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

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

曾经觉得只能通过脚本辅以配置才能比较完美的解决这个问题，这两天才发现原来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行后的内容被隐藏，并用省略号替代超长的内容。

使用之前是这样的：

服用以后是这样的：

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

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

作者：阿克