react-lines-ellipsis源码深度剖析隐藏Canvas测量法实现多行省略的完整原理【免费下载链接】react-lines-ellipsisSimple multiline ellipsis component for React.JS项目地址: https://gitcode.com/gh_mirrors/re/react-lines-ellipsisreact-lines-ellipsis是 React 生态中最经典的多行省略组件之一。当 CSS 的-webkit-line-clamp在非 WebKit 浏览器上失效时它通过一套被称为隐藏 Canvas 测量法的巧妙机制在任意现代浏览器上都能精确实现多行文本省略。本文将从源码剖析角度逐行拆解这套隐藏 Canvas 测量法实现多行省略的完整原理让新手也能看懂这个号称 Poor mans multiline ellipsis 的组件到底聪明在哪里。 核心关键词react-lines-ellipsis、多行省略、Canvas测量法、源码剖析、React 多行文本截断为什么多行省略一直是前端难题单行省略一行 CSS 就能搞定text-overflow: ellipsis。但多行省略multiline ellipsis至今没有 W3C 标准方案最常见的-webkit-line-clamp只对 WebKit/Blink 内核有效Firefox 长期不支持。于是社区涌现出两类方案方案类型代表优点缺点纯 CSS 方案-webkit-line-clamp性能好、实现简单兼容性差、不可控省略号样式JS 测量方案react-lines-ellipsis跨浏览器、精确控制需要 DOM 测量、有性能开销react-lines-ellipsis 选择了后者而它的测量核心就是一个看不见的影子 DOM。认识 react-lines-ellipsis 的核心架构整个项目非常精简核心源码集中在src/目录下共 6 个文件src/index.jsx主组件 LinesEllipsis处理纯文本省略src/common.js隐藏 Canvas 的样式清单与基础配置src/html.jsxHTMLEllipsis支持富文本 HTML 省略src/loose.jsx基于 WebkitLineClamp 的轻量版本src/responsiveHOC.jsx响应式高阶组件监听窗口变化src/helpers.js工具函数其中index.jsx的 186 行代码就是隐藏 Canvas 测量法的完整实现。隐藏 Canvas 测量法的完整工作原理整套算法可以拆成五个步骤环环相扣第一步克隆一个影子节点影子 Canvas组件挂载后initCanvas()会在document.body末尾追加一个绝对定位、高度为 0、overflow hidden 的隐藏 div类名是LinesEllipsis-canvas。关键在copyStyleToCanvas()const targetStyle window.getComputedStyle(this.target) mirrorProps.forEach((key) { this.canvas.style[key] targetStyle[key] })src/common.js中的mirrorProps定义了 13 个必须镜像的样式属性包括font-size、font-weight、font-family、letter-spacing、word-break、padding-left等。字体相关属性决定了文字宽度必须 1:1 复制否则测量结果就会失真。第二步把文本切成测量单位reflow()中文本会被拆分成最小测量单位case words: this.units props.text.split(/\b|(?\W)/) // 按单词切分 break case letters: this.units Array.from(props.text) // 按字符切分 break默认会通过 ASCII 正则猜测纯英文按单词words切含中文等多字节字符按字符letters切。每个单位被包进一个span classLinesEllipsis-unit放进隐藏 Canvas 中。第三步用 offsetTop 数出每一行这是整套算法最精妙的一步。calcIndexes()遍历所有 unit span通过比较相邻 span 的offsetTop判断是否换行if (elt.offsetTop offsetTop) { line indexes.push(index) // 记录每行最后一个单位的索引 offsetTop elt.offsetTop }因为所有 span 都在同一个宽度受限的容器里只要offsetTop变大就说明这一单位被挤到了下一行。这样就能得到每一行结束位置的索引数组indexes。第四步精确放置省略号putEllipsis()先取出第maxLine 1行的起始索引截断文本在末尾拼接一个wbr和省略号 span。随后进入一个 while 循环只要省略号与上一行不在同一行offsetTop不同或比上一行更高offsetHeight更大就继续删除前面的单位直到省略号恰好落在最后一行的结尾。while (ndPrevUnit ( ndEllipsis.offsetTop maxOffsetTop || // IE/Edge 不支持 wbr ndEllipsis.offsetHeight ndPrevUnit.offsetHeight || ndEllipsis.offsetTop ndPrevUnit.offsetTop )) { this.canvas.removeChild(ndPrevUnit) units.pop() }这一步保证了省略号永远不会被挤到下一行单独显示。第五步把结果同步回真实 DOM测量完成后组件调用setState把截断后的文本渲染到真实组件中如果设置了trimRight还会用正则[\s\uFEFF\xA0]$去掉行尾空白防止省略号出现在空行上。通过onReflow回调你还能拿到{ clamped, text }结果用于二次处理。三个关键源码文件速览文件核心职责关键代码位置src/common.js定义 canvasStyle 与 13 个镜像样式属性第 1~26 行src/index.jsx测量、截断、渲染主流程reflow第 91 行、calcIndexes第 117 行、putEllipsis第 139 行src/responsiveHOC.jsx150ms 防抖监听 resize 并触发重算第 5~42 行进阶富文本省略与响应式适配富文本支持src/html.jsx的 HTMLEllipsis 通过递归遍历 DOM 节点hookNode把文本节点也拆成 unit span复用同一套测量逻辑甚至支持ellipsisHTML自定义省略号样式。响应式适配responsiveHOC用 lodash 的debounce防抖监听window.resize把winWidth作为 prop 传入触发copyStyleToCanvas重新测量窗口变化时省略位置自动更新。轻量替代src/loose.jsx直接用WebkitLineClamp配合maxHeight做 fallback适合追求性能、且目标浏览器兼容的场景。隐藏 Canvas 测量法与 CSS line-clamp 怎么选✅ 选 react-lines-ellipsis需要跨浏览器一致表现、要自定义省略号、要支持富文本、需要onReflow回调感知截断状态。✅ 选 CSS line-clamp纯文本、目标环境固定为 WebKit 内核、对首屏性能极其敏感、无需感知截断结果。总结react-lines-ellipsis 用不到 200 行代码就把多行省略这个难题拆解成了样式镜像、单位切分、行索引计算、省略号定位四个清晰步骤。隐藏 Canvas 测量法的核心思想——在看不见的容器里用真实布局引擎模拟渲染再读取几何信息——不仅是多行省略的通用解法也值得你在做文本测量、自适应布局时借鉴。如果你正在为 React 项目的多行文本截断头疼不妨 clone 下来跑一遍示例源码虽短却处处是前端性能与布局的巧思。【免费下载链接】react-lines-ellipsisSimple multiline ellipsis component for React.JS项目地址: https://gitcode.com/gh_mirrors/re/react-lines-ellipsis创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考