多行省略号。。。

多行省略号 插件 clamp.js

众所周知，要实现文本溢出显示省略号可以用text-overflow:ellipsis;但是只能显示单行文本；

多行文本可以用-webkit-line-clamp:n;但是这是webkit的私有属性，只有在webkit浏览器或移动端浏览器（大部分是webkit内核）可以发挥作用；

为了兼容各浏览器，可以使用::after选择器模拟省略号，但是此方案有一个缺点：及时没有溢出是省略号也存在。

经过一番查找，发现一个小工具：clamp.js：

$clamp(node,options);

其中node是要操作的节点，options包括：clamp——行数，useNativeClamp——是否使用-webkit-line-clamp属性，trucationChar——省略的符号（不限于省略号），truncationHTML——省略的内容（不限于符号），animate——是否实现动画折叠。

现将基本用法列举如下：

p {          width: 130px;  }  

水光潋滟晴方好，山色空蒙雨亦奇。欲把西湖比西子，淡妆浓抹总相宜。——《饮湖上初晴后雨二首.其二》，苏轼

var node=document.getElementById("chuli");  $clamp{node,{clamp:2}};  

$clamp(node,{clamp:3,useNativeClamp:false,truncationChar:' ',truncationHTML:'Read more.'});

注：1.如果省略useNativeClamp，默认是true，即在webkit内核浏览器上除clamp属性之外、其他属性都将不起作用。