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

背景

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

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

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

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

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

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

造轮子前

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

react-lines-ellipsis

问题：

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

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

  

• 不支持设置高度缩略

react-truncate

问题：

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

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

轮子介绍

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

先看个简单的示例

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

已完成功能

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

计划中

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

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

Q & A

• 如何保障性能？

• 兼容性