CSS3多行截字之-webkit-line-clamp

-webkit-line-clamp 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
它的作用是限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：

display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。

利用-webkit-line-clamp我们可以做到用纯CSS来多行截字，demo如下：

WebKit Browsers will clamp the number of lines in this paragraph to 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa quiofficia deserunt mollit anim id est laborum.

代码：

<p style="
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
">WebKit Browsers will clamp the number of lines  in this paragraph to 2. Lorem ipsum dolor sit amet,  consectetur adipisicing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim  ad minim veniam, quis nostrud exercitation ullamco  laboris nisi ut aliquip ex ea commodo consequat. Duis  aute irure dolor in reprehenderit in voluptate velit
  esse cillum dolore eu fugiat nulla pariatur. Excepteur  sint occaecat cupidatat non proident, sunt in culpa quiofficia deserunt mollit anim id est laborum.
</p>

当然这个属性不是所有浏览器都支持的，有人给出了替代方案，可以参考地址：
http://www.cssmojo.com/line-clamp_for_non_webkit-based_browsers/

本文参考：
http://www.css88.com/webkit/-webkit-line-clamp/
http://dropshado.ws/post/1015351370/webkit-line-clamp