文本省略、展开收起功能实现,计算超精准

众所周知,浏览器实现文本省略十分复杂,难度在于

  1. 不同浏览器需计算文本宽度。
  2. 文本啥时候换行?
  3. 文本行首不能为标点符号,若即将排版到了标点符号,浏览器会怎么处理,以及这其中处理带来的文本计算误差。
  4. 文本啥时候省略?
  5. 文本省略后面若想加展开更多这样的按钮咋办?
  6. 文本中若有换行符,这其中的种种宽度又该如何计算?
    由于想精准计算浏览器的换行、省略等行为有如此之多的难点,故市面上极少有一款类库能将其计算精准

故在此推荐一款本人长时间投入并最终产出的一系列关于文本计算的库

类库或组件库npm地址文档地址
原生实现@typography-org/nativehttps://www.npmjs.com/package/@typography-org/nativehttps://drdevelop.github.io/typography/native/index.html
react组件@typography-org/reacthttps://www.npmjs.com/package/@typography-org/reacthttps://drdevelop.github.io/typography/react/index.html
vue组件 @typography-org/vuehttps://www.npmjs.com/package/@typography-org/vuehttps://drdevelop.github.io/typography/vue/components/paragraph/index.html

组件库的优势:

  1. 完善的官方使用文档
  2. 覆盖市面上常见的主流框架(React、Vue)
  3. 文本省略精准度极高
  4. 展开收起功能
  5. 展开收起按钮样式可完全自定义,比如修改颜色、添加边距等

可能会有很多同学疑问 ———— 我是否可在生产环境?

  1. 精准度高吗?
    精准度高达99%以上
  2. 作者的库自己经过大量极端场景测试了吗?
    目前该库经过我司的测试同学经过无数极端用例以及长时间的测试,已知计算有偏差的问题均已解决
  3. 作者的库跑在自己项目上了吗?
    底层库已跑在日活20万以上的移动端项目。

声明:
有小伙伴若在生产环境使用该库,还是要经过测试的验证方可上线哟,毕竟可能个别极端case可能我们这边也没覆盖到

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值