多行省略号。。。

多行省略号 插件 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属性之外、其他属性都将不起作用。

你可能感兴趣的:(多行省略号。。。)