多行文本溢出显示省略号

一、在Webkit浏览器可以直接使用WebKit的CSS扩展属性-webkit-line-clamp，但这是一个不规范的属性，它没有出现在CSS规范草案中

    -webkit-line-clamp用来限制在一个块元素显示的文本的行数

    为了实现该效果，它需要组合其他的WebKit属性。
    常见结合属性：

　　display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。

　　-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

　　text-overflow: ellipsis;，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。

    查看例子：http://codepen.io/xiaoyewen/pen/ByMjbZ

 

二、跨浏览器实现，用实际的省略号模拟实现

   设置容器为相对定位，指定高度为行高的倍数，设置overflow为hidden，然后给元素的after伪元素绝对定位并填充省略号内容

   查看例子：http://codepen.io/xiaoyewen/pen/QwYyXm

 

三、 javascript实现方案

　　1. Clamp.js 文档地址：https://github.com/josephschmitt/Clamp.js

      2. jQuery插件 jQuery.dotdotdot: https://github.com/BeSite/jQuery.dotdotdot