多行文本截断的新思路！ shear.js，直接解决两大痛点

[droiz]

一直以来，多行文本截断一直是一个不那么好解决的问题，通常有两种思路：

• 使用-webkit-line-clamp，但是非 webkie 浏览器不支持，而且对样式有侵入性
• 使用 clamp.js/shave.js 这类的工具对目标元素内的文本进行裁剪，其原理是对内容进行二分查找（裁剪），不断逼近目标高度，但限制是目标元素必须为块级元素，而且只能操作元素内的纯文本。

shear.js 的原理是使用 Selection API 根据实际可视内容创建选区，以此来进行截断，这就直接规避了同类工具的所有缺点，效果与-webkit-line-clamp 完全相同，并且可以保留元素内的所有节点。

下面是几个示例

截断前

截断后

截断前

截断后

详见codepen.io

Github: https://github.com/zhengrenzhe/shear.js 欢迎 star | fork | issue

混了这么久 v2，还是第一次发分享创造的内容，惭愧惭愧，感谢支持！

[airyland]

赞一下，测试了一下，移动端也完美支持。

[droiz]

图有点慢，放在 github 上了，可能需要翻墙。明天换七牛的

[droiz]

@airyland 忘了详细测下兼容性了，pc 主流都没啥问题，后面得补上

[droiz]

<p>截断前</p>


<p>截断后</p>


<p>截断前</p>


<p>截断后</p>


[fe619742721]

不错不错，收藏一下，多行截断是个麻烦问题，

[qfdk]

没看明白是什么玩意儿 尴尬 能不能说说具体的作用. 看图也没明白 难道是个 more 这样的功能？

[crysislinux]

不错，star 了一个

[droiz]

@qfdk 就是多行文本截断啊，原来 3 行，截断后 2 行，很多类似于摘要信息之类的地方都可能用到。

[qfdk]

@droiz 可能对截断这个词理解不同... 感觉这样就是一个信息摘要 就是类似于 more 标签？

[droiz]

@qfdk 假设你一段文字实际占 10 行，但是你想只显示 2 行，等用户点击展开后再显示剩余内容，这个工具就是帮你隐藏那剩余的 8 行。

[droiz]

自顶一下

[droiz]

各位大佬别光收藏啊，快去 star 一波🤔

[labuboco]

@droiz 啊啊啊啊啊 百度？

[droiz]

@labuboco ???

[CrownLeo]

感觉不支持 ie 是最大的问题啊，要不试试在 ie 下做个兼容的处理？