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

2017-12-23 00:20:28 +08:00
 droiz

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

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

下面是几个示例

截断前

截断后

截断前

截断后

详见codepen.io

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

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

3885 次点击
所在节点    分享创造
15 条回复
airyland
2017-12-23 00:28:44 +08:00
赞一下,测试了一下,移动端也完美支持。
droiz
2017-12-23 00:28:51 +08:00
图有点慢,放在 github 上了,可能需要翻墙。明天换七牛的
droiz
2017-12-23 00:30:03 +08:00
@airyland 忘了详细测下兼容性了,pc 主流都没啥问题,后面得补上
droiz
2017-12-23 00:35:34 +08:00
<p>截断前</p>

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

<p>截断后</p>

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

<p>截断前</p>

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

<p>截断后</p>

![]( 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
没看明白是什么玩意儿 尴尬 能不能说说具体的作用. 看图也没明白 难道是个 more 这样的功能?
crysislinux
2017-12-23 08:31:32 +08:00
不错,star 了一个
droiz
2017-12-23 08:46:43 +08:00
@qfdk 就是多行文本截断啊,原来 3 行,截断后 2 行,很多类似于摘要信息之类的地方都可能用到。
qfdk
2017-12-23 15:30:32 +08:00
@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
@droiz 啊啊啊啊啊 百度?
droiz
2017-12-27 11:00:44 +08:00
CrownLeo
2017-12-28 23:18:09 +08:00
感觉不支持 ie 是最大的问题啊,要不试试在 ie 下做个兼容的处理?

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/416975

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX