省略、展开、收起功能实现
众所周知,浏览器实现文本省略十分复杂,难度在于
- 不同浏览器需计算文本宽度。
- 文本啥时候换行?
- 文本行首不能为标点符号,若即将排版到了标点符号,浏览器会怎么处理,以及这其中处理带来的文本计算误差。
- 文本啥时候省略?
- 文本省略后面若想加
展开更多
这样的按钮咋办? - 文本中若有换行符,这其中的种种宽度又该如何计算?由于想精准计算浏览器的换行、省略等行为有如此之多的难点,故市面上极少有一款类库能将其计算精准
故在此推荐一款本人长时间投入并最终产出的一系列关于文本计算的库
类库或组件库 | npm地址 | 文档地址 |
---|---|---|
原生实现@typography-org/native | https://www.npmjs.com/package... | https://drdevelop.github.io/t... |
react组件@typography-org/react | https://www.npmjs.com/package... | https://drdevelop.github.io/t... |
vue组件 @typography-org/vue | https://www.npmjs.com/package... | https://drdevelop.github.io/t... |
组件库的优势:
- 完善的官方使用文档
- 覆盖市面上常见的主流框架(React、Vue)
- 文本省略精准度极高
- 展开收起功能
- 展开收起按钮样式可完全自定义,比如修改颜色、添加边距等
可能会有很多同学疑问 ———— 我是否可在生产环境?
- 精准度高吗?精准度高达
99%
以上 - 作者的库自己经过大量极端场景测试了吗?目前该库经过我司的测试同学经过无数极端用例以及长时间的测试,已知计算有偏差的问题均已解决
- 作者的库跑在自己项目上了吗?底层库已跑在日活
20万以上
的移动端项目。
声明:有小伙伴若在生产环境使用该库,还是要经过测试的验证方可上线哟,毕竟可能个别极端case可能我们这边也没覆盖到
转载自:https://segmentfault.com/a/1190000041790233