灵活截断多行文本的实用JS插件

对于需要文字截断显示省略号(…)，前端同学首先想到的是:

white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

但如果需要多行截断显示省略号(…)呢？并且还需要响应式，也就是相同的DOM在不同的屏幕下都能显示完美。
呃…

今天设计小咖分享的就是能完美解决这些需求的一个实用小组件 —— Shave。

特点

• 保留截断后的原始文本
• 不依赖其他JavaScript库
• 只需要一个选择器和设定最大高度(max-height)
• 是非常轻量级 – 〜1.5KB
• 允许自定义省略号字符串和类名
• 可以很容易兼容其他JavaScript库

用法

超简单的调用：

shave('selector', maxheight);

Shave预留灵活修改的接口方法，因此如果你想自定义类名而不是用默认的.js-shave, 可以这样调用

shave('selector', maxheight, {classname: 'classname'});

又或者你想自定义截断后提示字符（取代默认的…)，可以这样：

shave('selector', maxheight, {character: '✁'});

又或者两样同时自定义:

shave('selector', maxheight, {classname: 'classname', character: '✁' });

当然你也可以结合常用的JS类库如jQuery/Zepto来调用：

$('selector').shave(maxheight);

结合 jQuery/Zepto 来自定义参数:

$('selector').shave(maxheight, { classname: 'your-css-class', character: '✁'  });