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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 2528 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

使用-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 条回复 • 2017-12-28 23:18:09 +08:00

airyland

2017-12-23 00:28:44 +08:00

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

droiz

2017-12-23 00:28:51 +08:00 via iPhone

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

droiz

2017-12-23 00:30:03 +08:00 via iPhone

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

droiz

2017-12-23 00:35:34 +08:00

截断前

![]( 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

2017-12-23 00:36:09 +08:00

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

qfdk

2017-12-23 05:26:10 +08:00 via iPhone

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

crysislinux

2017-12-23 08:31:32 +08:00 via Android

不错，star 了一个

droiz

2017-12-23 08:46:43 +08:00 via iPhone

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

qfdk

2017-12-23 15:30:32 +08:00 via iPhone

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

droiz

2017-12-23 19:20:37 +08:00

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

droiz

2017-12-23 21:26:00 +08:00

自顶一下

droiz

2017-12-25 12:21:24 +08:00

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

labuboco

2017-12-27 09:23:12 +08:00 via Android

@droiz 啊啊啊啊啊百度？

droiz

2017-12-27 11:00:44 +08:00

@labuboco ???

CrownLeo

2017-12-28 23:18:09 +08:00 via iPhone

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