clamp-js文本溢出显示省略号的小工具

发表于

一个HTML元素的内容，如果里面的内容太长，就会添加省略号。

下载

1
npm install @types/clamp-js

引入

1
import * as clamp from 'clamp-js';

使用

1
2
3
4
var myHeader = document.getElementsByTagName('body')[0].getElementsByTagName('h1')[0],
   myParagraph = document.getElementsByTagName('body')[0].getElementsByTagName('div')[0];
clamp(header, {clamp: 1, useNativeClamp: false});
clamp(paragraph, {clamp: '30px', useNativeClamp: false, animate: true});

clamp( 元素, {…}), 配置参数如下:

​ clamp——行数|像素|’auto’，

​ useNativeClamp——是否使用-webkit-line-clamp属性，

​ trucationChar——省略的符号，在截断之后插入到HTML元素末尾的字符被执行。 默认为省略号（…）。

​ truncationHTML——省略的内容（不限于符号），在截断字符之前插入的一个HTML字符串。 如在节点末尾添加一个“查看更多”链接或者其他东西。

​ animate——是否实现动画折叠。