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;
}
<p id="chuli">水光潋滟晴方好，山色空蒙雨亦奇。欲把西湖比西子，淡妆浓抹总相宜。——《饮湖上初晴后雨二首.其二》，苏轼</p

1.

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

2.

<pre name="code" class="html">.setColor{
color:blue;
}

$clamp(node,{clamp:3,useNativeClamp:false,truncationChar:' ',truncationHTML:'<span class="setColor">Read more.</span>'});

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

        2.github地址：https://github.com/josephschmitt/Clamp.js