资源详情
灵活截断多行文本的实用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: '✁' });