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

爱意满满的作品展示区。

This topic created in 3112 days ago, the information mentioned may be changed or developed.

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

使用-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，还是第一次发分享创造的内容，惭愧惭愧，感谢支持！

截断

文本

shear

惭愧

15 replies • 2017-12-28 23:18:09 +08:00

airyland

Dec 23, 2017

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

droiz

Dec 23, 2017 via iPhone

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

droiz

Dec 23, 2017 via iPhone

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

droiz

Dec 23, 2017

截断前

![]( https://dn-droiz.qbox.me/p11.png)

截断后

![]( https://dn-droiz.qbox.me/p2.png)

截断前

![]( https://dn-droiz.qbox.me/p3.png)

截断后

![]( https://dn-droiz.qbox.me/p4.png)

fe619742721

Dec 23, 2017

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

qfdk

PRO

Dec 23, 2017 via iPhone

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

crysislinux

Dec 23, 2017 via Android

不错，star 了一个

droiz

Dec 23, 2017 via iPhone

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

qfdk

PRO

Dec 23, 2017 via iPhone

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

droiz

Dec 23, 2017

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

droiz

Dec 23, 2017

自顶一下

droiz

Dec 25, 2017

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

labuboco

Dec 27, 2017 via Android

@droiz 啊啊啊啊啊百度？

droiz

Dec 27, 2017

@labuboco ???

CrownLeo

Dec 28, 2017 via iPhone

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