开源个 react 多行缩略组件，支持自定义缩略符、尾文本过滤、

背景

入职头条快一年，平常工作中，不止一次听到 UI 反馈，头条 App 内的 h5 上偶尔会出现下面这样的体验 bug。

image-20210228170527346

在缩略符 “...” 前面会小概率出现标点符号，看起来很不雅观。这么长时间这个问题一直没解决，因为自己手头的业务有点多也就没去关注这个他人需求。

最近刚好弄完绩效评估处于需求真空期，刚好想起这个问题，就顺手给解决了，沉淀了个 react 的缩略组件。考虑到这是个很通用的需求，所以整理了一下开源出来。

先直接上干货吧，组件已经开源在 github 上，仓库地址： react-ellipsis (觉得有用可以给个 star)。

可能会有人疑惑，这么常见的需求真的没有可用的轮子吗？我一开始也带着这个疑惑，搜了一下 npm 和 github，发现还真没有能完全符合条件的...

那就自己来造一个吧 -。-

造轮子前

在准备动手解决问题前，我浏览了一下 npm 和 github 上已有的缩略组件，根据 star 数挑几个看看

react-lines-ellipsis

截止发文

• stars 数 376
• 未处理 issue 15
• 上次功能更新 2 年前

问题：

• 不支持结尾标点符号过滤，只能过滤空白符（可通过 pr 解决，但是作者很长时间未处理 pr 了）

• 每个 ellipsis 组件都会生成一个隐藏的 div 去计算，性能损耗严重

  image

• 不支持设置高度缩略

react-truncate

截止发文

• stars 数 503
• 未处理 issue 33
• 上次功能更新 8 月前

问题：

• 不支持结尾标点符号过滤，只能过滤空白符
• 不支持按单词或字母切割
• onResize 需要自行调用
• 使用 canvas 实现，当元素较多时性能损耗严重

其他组件或多或少都有各自的问题导致无法满足我们的需求，所以动手自己撸吧。

轮子介绍

吭哧吭哧搞了一个下午就写完了，目前迭代到 0.5.2 版本。

先看个简单的示例

image

提示：容器拉伸是为了方便演示加的，实际组件不包含拉伸功能。

已经实现和计划中的功能：

已完成功能

• 自定义缩略符
• 自定义缩略符节点
• 尾字符过滤
• 缩略回调
• 缩略符点击回调
• 自适应

计划中

• 按单词或字母分割
• 支持内容换行
• 支持收起符
• ResizeObserver 不支持时用 window.onresize 兼容

具体功能和示例可以查看 react-ellipsis 文档

Q & A

• 如何保障性能？

  切割算法上，其他组件大多是通过切割成字符数组后，一个个减少直到容器不再溢出，时间复杂度是 O(n)。react-ellipsis-component 使用二分切割将时间复杂度降到 O(logn)。

  计算时在原容器上计算，其他组件使用隐藏的 div 或者 canvas，当 ellipsis 组件很多时性能损耗严重。

  在自适应上，使用 ResizeObserver 实现，而其他组件使用 window.onresize（性能损耗比较大）。

• 兼容性

  兼容性主要在于 ResizeObserver 实现的自适应缩略，如果不需要自适应缩略，可以覆盖绝大部分的现代浏览器。组件本身除了 react 不依赖其他库，兼容性有保证。

  后续会添加 window.onresize 的兼容逻辑进一步提高兼容性。

  附：ResizeObserver 兼容性表

  image