<p>text-combine-upright: all 仅在 vertical writing-mode 下生效，需配合 writing-mode: vertical-rl 或 vertical-lr 使用，且须加 -webkit- 前缀兼容 Safari；digits 类值均不被支持，仅 none 和 all 可用；实际效果依赖字体合字支持与连续字符判定。</p>
text-combine-upright 必须配合 vertical writing-mode 才生效
单独写 text-combine-upright: all 没用——这个属性只在垂直书写模式下起作用。浏览器会直接忽略它，不报错也不渲染效果。
必须先设置 writing-mode，常见选值是 vertical-rl（中文竖排主流）或 vertical-lr。例如：
.date-vertical {
writing-mode: vertical-rl;
text-combine-upright: all;
}
注意：不要漏掉 -webkit- 前缀，Safari 16.4 之前仍需 -webkit-text-combine-upright: all，否则不生效。
digits 和 digits2 这类值基本不能用
MDN 文档写着 digits、digits2、digits4，但截至 2026 年 5 月，Chrome 124+、Firefox 125、Safari 17.5 都**不支持**带数字的 digitsN 语法。实测会退回到 none 行为，相当于没写。
立即学习“前端免费学习笔记（深入）”；
目前唯一稳定可用的值只有两个：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
none（默认，不合并） -
all（尝试合并所有连续水平字符）
所谓“所有连续水平字符”，指纯数字（如 2024）、纯大写拉丁字母（如 ABC），或它们的混合（如 NO.123）。但实际能否压进 1em 宽度，取决于字体是否提供合字支持，以及浏览器是否启用该字体特性。
为什么数字还是被拉宽或换行？
即使写了 text-combine-upright: all，也可能看到数字没压扁、反而撑开容器，甚至断成两行。常见原因有：
- 父容器没有固定宽度（比如
width: auto），浏览器无法约束“单字符空间” - 用了不支持竖排合字的字体（如系统默认的
system-ui或Helvetica），建议显式指定font-family: "PingFang SC", "Noto Sans CJK SC", sans-serif - 数字前后夹着中文标点（如
年份：2024），冒号会打断“连续字符”判断，导致只合并2024，但冒号仍占一格 - CSS 层叠覆盖：外层样式写了
text-combine-upright: none，子元素没重写，就会继承失效
兼容性差时的务实 fallback 方案
别强求所有浏览器都显示合字效果。更可靠的做法是分层控制：
- 基础层：用
text-orientation: upright让数字直立（不旋转），至少可读 - 增强层：叠加
text-combine-upright: all，现代浏览器自动启用合字 - 兜底层：对老 Safari 或 IE，接受数字直立但未压缩，视觉上比旋转 90° 更易识别
关键不是“能不能压成一个字”，而是“用户能不能一眼认出这是 2024”。多数场景下，直立 + 等宽字体 + 合理字号，已经比旋转数字好太多。
真正容易被忽略的是：合字效果不可预测——同一段 HTML，在 Chrome 里压成功，在 Safari 里可能只压前两位，第三个数字溢出。所以别把它当布局工具用，只当可选的排版微调项。
