关于前端:省略展开收起功能实现

58次阅读

共计 677 个字符,预计需要花费 2 分钟才能阅读完成。

家喻户晓,浏览器实现文本省略十分复杂,难度在于

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

故在此举荐一款自己长时间投入并最终产出的一系列对于 文本计算的库

类库或组件库npm 地址文档地址
原生实现 @typography-org/nativehttps://www.npmjs.com/package…https://drdevelop.github.io/t…
react 组件 @typography-org/reacthttps://www.npmjs.com/package…https://drdevelop.github.io/t…
vue 组件 @typography-org/reacthttps://www.npmjs.com/package…

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

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

申明:
有小伙伴若在生产环境应用该库,还是要通过测试的验证方可上线哟,毕竟可能个别极其 case 可能咱们这边也没笼罩到

正文完
 0