CSS text-wrap 文本换行排版优化器
可视化生成 CSS text-wrap 文本换行属性（CSS Text Module Level 4，2023-2024 年逐步落地）：
完整支持 wrap（默认换行）、nowrap（不换行）、
balance（平衡换行，适合标题）、pretty（优化换行，避免孤行）、
stable（稳定换行，适合编辑）五种值。内置三值对比模式——
并排展示 wrap / balance / pretty 的换行效果差异，直观理解各值算法原理。
可调节容器宽度、字号、行高、字体族、对齐方式等排版参数，6 组预设覆盖标题平衡、
段落优化、不换行标签、卡片标题等场景。适用于 CSS 排版优化、标题换行平衡、
段落孤行避免等前端开发场景。所有处理在浏览器本地完成。
text-wrap 值
CSS 选择器
排版参数
预览文本
原理说明
浏览器计算最优断行点，让各行长度尽量均衡。算法限制最多 10 行（超过则退化为 wrap），因此适合标题、引言等短文本块，不适合长段落。
.title {
text-wrap: balance;
font-size: 28px;
line-height: 1.3;
font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
text-align: left;
font-weight: 700;
}常见问题
什么是 text-wrap？它解决了什么问题？
text-wrap 是 CSS Text Module Level 4 引入的文本换行控制属性，决定元素内文本的换行方式。
它解决了传统换行的三大痛点：一是标题换行不均衡——默认 wrap 按容器宽度逐行填充，
标题最后一行可能只剩几个字，视觉参差不齐；二是段落孤行问题——最后一行只剩一个词，
阅读体验差；三是编辑时文本跳动——在 contenteditable 中输入文字时，新增字符导致前面行重新换行，
光标位置不稳定。text-wrap 提供了 balance（平衡）、pretty（优化）、stable（稳定）三种新值，
分别解决这三个问题。语法：.title { text-wrap: balance; }，一行 CSS 即可优化排版。
text-wrap 的五个值（wrap/nowrap/balance/pretty/stable）有什么区别？
wrap（默认）：正常换行，文本填满容器宽度后换行。简单高效，但可能出现孤行。
nowrap：不换行，文本强制在一行内。需配合 overflow: hidden 和 text-overflow: ellipsis 处理溢出。
balance：平衡换行，浏览器计算最优断行点让各行长度均衡。限制最多 10 行（超过退化为 wrap）。
适合标题、引言等短文本。
pretty：优化换行，在 wrap 基础上避免孤行（最后一行单个词）。适合段落正文。
stable：稳定换行，编辑场景下光标后面的行不会因新增字符重新换行。适合 contenteditable。
关键差异：wrap 是"填满即换"，balance 是"各行均衡"，pretty 是"避免孤行"，stable 是"编辑不跳"。
balance 和 pretty 有什么区别？各自适合什么场景？
两者都优化换行，但策略和适用场景不同：
balance：目标是各行长度均衡。浏览器计算所有可能的断行点，
选择让各行长度差异最小的方案。例如标题"CSS text-wrap 属性让排版更优雅"，wrap 可能第二行只剩"更优雅"，
balance 会调整为两行长度接近。限制最多 10 行（长文本退化为 wrap），因此适合标题、卡片标题、引言等短文本。
pretty：目标是避免孤行。不追求各行均衡，只在 wrap 基础上检查最后一行是否只剩一个词，
如果是则提前将上一个词换到下一行。计算开销比 balance 小，适合段落正文等长文本。
简单经验：短文本（标题）用 balance，长文本（段落）用 pretty。
text-wrap 与 white-space 有什么区别？什么时候用哪个？
两者都影响文本换行，但控制维度不同：
white-space：控制空白符和换行符的处理方式。如 nowrap 禁止换行，
pre 保留空白和换行，pre-wrap 保留空白但正常换行。它是 CSS 2.1 的老属性，
语法稳定、兼容性极好。
text-wrap：控制换行算法的策略。在 white-space 允许换行的前提下
（即 white-space 不是 nowrap/pre），决定如何选择断行点。它是 CSS Text Level 4 的新属性，
提供 balance/pretty/stable 等智能换行策略。
关系：text-wrap: nowrap 等价于 white-space: nowrap。
新项目可用 text-wrap 统一管理换行，老项目兼容性考虑可同时写 white-space: nowrap 作为回退。
本工具生成 nowrap 代码时会自动补充 white-space: nowrap 兼容声明。
text-wrap 的浏览器兼容性如何？旧浏览器怎么降级？
各值兼容性（截至 2025 年）：
- wrap / nowrap：全浏览器支持（等价于 white-space 的 wrap/nowrap）。
- balance：Chrome 114+ / Edge 114+ / Firefox 121+ / Safari 17.5+ 支持，覆盖率约 90%。
- pretty：Chrome 117+ / Edge 117+ 支持，Firefox/Safari 暂不支持，覆盖率约 65%。
- stable：Firefox 支持，Chrome/Safari 暂不支持，覆盖率较低。
降级策略：text-wrap 是渐进增强属性——不支持的浏览器忽略该声明，
回退为默认的 wrap 换行，不会报错。因此可放心使用，新浏览器享受优化排版，旧浏览器正常换行不受影响。
无需额外写降级代码。对于 nowrap 场景，建议同时写 white-space: nowrap 确保旧浏览器也不换行。
balance 的 10 行限制是什么意思？为什么不适合长段落？
10 行限制是浏览器实现 balance 算法的性能保护措施。balance 需要计算所有可能的断行组合
来找到最优方案，计算复杂度随行数增长。如果文本超过 10 行，浏览器会自动退化为 wrap（默认换行），
避免性能开销。
这意味着 balance 对长段落无效——长段落本身就会超过 10 行，
balance 退化为 wrap，与不写 balance 效果相同。
因此 balance 的最佳使用场景是短文本块：h1-h6 标题（通常 1-3 行）、
卡片标题（2-4 行）、引言（3-5 行）、列表项（1-2 行）。
长段落应使用 pretty（优化孤行，无行数限制）或保持默认 wrap。
本工具的预设已按场景区分：标题用 balance，段落用 pretty。
stable 值适合什么场景？为什么编辑时需要它？
stable 专为编辑场景设计（contenteditable、输入框）。
问题背景：在 contenteditable 中编辑文本时，每输入一个字符，浏览器会重新计算整个文本块的换行。
如果新增字符导致某行变长溢出，该行末尾的词会换到下一行，导致光标后面的所有行重新排列——
用户看到文本不停跳动，体验很差。
stable 的解决方案：保持光标之前的行不动，只在光标之后的行重新换行。
这样编辑时前面的文本稳定不跳，只有后面的行可能调整。
适用场景：富文本编辑器、评论输入框、笔记应用等 contenteditable 场景。
静态展示页面不需要 stable（没有编辑行为，不存在跳动问题）。
注意：stable 目前仅 Firefox 支持，Chrome/Safari 暂不支持。在编辑器中可写
.editor { text-wrap: stable; }，Firefox 用户享受稳定编辑体验，其他浏览器不受影响。
这个工具的预览安全吗？数据会上传吗？
完全安全，零数据上传。本工具的所有操作在浏览器本地完成：
- 文本编辑、排版参数调节、CSS 代码生成、预览渲染全部在浏览器内存中完成，不发起任何网络请求。
- 预览区直接在页面 DOM 中渲染 text-wrap 效果，不使用 iframe，不加载外部资源。
- 生成的 CSS 代码仅在你本地浏览器中，点击复制按钮才会写入剪贴板。
- 无需注册、无需登录、无 Cookie 追踪、无广告，适合处理任何文本排版场景。
你输入的文本内容不会离开你的设备，可放心使用。