Repolode
提交项目
chenglou

chenglou/pretext

纯 JavaScript/TypeScript 多行文本测量与排版库，无需触发 DOM 回流即可计算文本高度与换行。

在 GitHub 查看官网
Star
50,839
Fork
2,761
未关闭 Issue
65
最近提交
5天前

这是什么？

Pretext 用纯 JavaScript 或 TypeScript 计算多行文本的换行与高度，让排版代码无需读取 `getBoundingClientRect` 或 `offsetHeight` 就能拿到段落高度或每一行的内容。这类 DOM 读取会迫使浏览器重新回流，开销较大。Pretext 以浏览器的 canvas 文字测量作为宽度来源，并在其上实现自己的断行逻辑。

基本用法分两步：`prepare()` 针对某个字体对文本做一次分析与测量，之后 `layout()` 只需对缓存的宽度做简单计算，即可给出任意最大宽度和行高下的 `height` 与 `lineCount`。更底层的 API 可返回每一行、行宽或游标，用于收缩包裹的气泡、绕图文字、按行数截断加省略号等手动排版。富文本内联 API 还能处理混合字体、代码片段以及图片、标签等内联元素。

库支持 `normal` 与 `pre-wrap` 两种空白模式、`keep-all` 断词方式以及字间距设置。运行环境需要支持 Canvas 2D 文本测量、Unicode 属性转义和 `Intl.Segmenter` 的浏览器；在浏览器之外使用时，需要自行提供 `OffscreenCanvas` 测量实现。

核心功能

  • 01通过 `prepare()` 与 `layout()` 计算段落高度和行数，无需触发 DOM 回流。
  • 02返回每一行的内容、宽度和游标，便于手动排版。
  • 03提供富文本内联 API，可处理混合字体、代码片段和图片、标签等内联元素。
  • 04支持 `pre-wrap` 空白模式、`keep-all` 断词和字间距。
  • 05排版结果可渲染到 DOM、Canvas 或 SVG。

适用场景

  • 在渲染前预知列表项高度，实现长列表虚拟化。
  • 将聊天气泡收缩到最长一行的宽度。
  • 让文字随图片形状绕排，每行宽度各不相同。
  • 开发阶段验证按钮文字是否会换到第二行。

快速上手

  1. 1

    从 npm 安装该包

    npm install @chenglou/pretext
  2. 2

    导入 prepare 和 layout，无需操作 DOM 即可测量段落高度

使用前须知

  • 许可证显示为 NOASSERTION，使用条款不明确，采用前需先行核实。
  • 布局测量依赖浏览器的字体引擎，因此结果精确度取决于可用字体。

标签

#text-layout#text-measurement#typescript#canvas#reflow#typography

常见问题

pretext 是什么？
纯 JavaScript/TypeScript 多行文本测量与排版库，无需触发 DOM 回流即可计算文本高度与换行。 Pretext 用纯 JavaScript 或 TypeScript 计算多行文本的换行与高度，让排版代码无需读取 `getBoundingClientRect` 或 `offsetHeight` 就能拿到段落高度或每一行的内容。这类 DOM 读取会迫使浏览器重新回流，开销较大。Pretext 以浏览器的 canvas 文字测量作为宽度来源，并在其上实现自己的断行逻辑。
pretext 可以免费使用吗？用的什么许可证？
pretext 以 Other 许可证开源。用于商业产品前，请先确认许可证条款。
pretext 还在维护吗？
活跃维护中。pretext 最近一次提交是在 2026年10月15日。
pretext 适合用来做什么？
在渲染前预知列表项高度，实现长列表虚拟化。 将聊天气泡收缩到最长一行的宽度。 让文字随图片形状绕排，每行宽度各不相同。 开发阶段验证按钮文字是否会换到第二行。
pretext 怎么安装和运行？
从 npm 安装该包: npm install @chenglou/pretext 导入 prepare 和 layout，无需操作 DOM 即可测量段落高度
在哪里获取 pretext？
源代码和安装说明在 GitHub 上：https://github.com/chenglou/pretext

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目