react-wrap-balancer

当标题在不同屏幕尺寸下出现末行只剩一个词、左右严重不齐时，react-wrap-balancer 能自动重新计算断行位置，让每行文字宽度趋于均衡，提升可读性。

核心能力

组件通过监听容器宽度变化，动态调整文本的换行点，使每行长度尽可能接近，尤其适合标题、标语、卡片文案等短文本场景。

• 自动平衡: 默认按1:1比例均衡各行宽度，ratio 属性可调节平衡强度（0~1）
• 原生降级: preferNative 默认开启，优先使用 CSS text-wrap: balance（Chrome 114+、Safari 17.2+），不支持时自动回退到 JavaScript 计算
• 轻量无侵入: 默认渲染为 <span>，通过 as 属性可改为任意 HTML 标签（如 h1、div）
• Provider 共享: 多个 Balancer 实例共用 Provider 可减少重复计算和 HTML 体积

兼容与依赖

依赖 ResizeObserver API，桌面端最低支持 Chrome 64、Edge 79、Safari 13.1、Firefox 69；移动端 Chrome 64、Safari 13.4、Firefox 69、WebView Android 64。IE 全系不支持。

• polyfill 提示: 低于上述版本的浏览器需自行添加 ResizeObserver polyfill
• 无外部依赖: 仅依赖 React（16.8+），无其他运行时库

项目背景与许可

由 Shu Ding 于 2022 年创建，灵感来自 Adobe 的 balance-text、纽约时报的 text-balancer 以及 Daniel Aleksandersen 的改进方案。

• GitHub 星标: 4.2k stars，63 forks
• 许可证: MIT License，可商用、修改、再分发
• 致谢: 特别感谢 Emil Kowalski 的测试与反馈

常见问题

Q1：react-wrap-balancer 和 CSS text-wrap: balance 有什么区别？

A1：CSS text-wrap: balance 是原生属性，仅支持 Chrome 114+、Safari 17.2+。react-wrap-balancer 默认优先使用原生方案（preferNative: true），在不支持的浏览器中自动用 JavaScript 实现相同效果，并提供 ratio 等额外控制参数。

Q2：能否在服务端渲染（SSR）中使用 react-wrap-balancer？

A2：可以。组件在服务端渲染时输出原始文本，客户端注水后执行平衡计算。Provider 可减少多个实例的重复计算，推荐在 Next.js、Gatsby 等 SSR 框架中包裹 Provider。

更多同类工具与网站,可在前端库分类继续挑选。

信息核实于 2026年7月,具体以官网为准。