text-combine-upright在现代浏览器中基本可用，但旧版safari（11–15）和android 4.4–6.x webview会忽略或部分渲染；chrome 58+、firefox 48+、edge 79+支持但存在差异，如safari对汉字无效、仅压缩数字/拉丁字母，ios 14前digits 2可能失败；应使用@supports检测并配合font-size缩放或transform旋转降级。
text-combine-upright 在现代浏览器中基本可用，但旧版 Safari 和部分 Android WebView 仍会忽略或部分渲染，不能当作“开箱即用”的功能来依赖。
哪些浏览器会出问题？
Chrome 58+、Firefox 48+、Edge 79+ 都支持 text-combine-upright，但存在明显差异：
- Safari 11–15：支持
all和digits <integer></integer>，但对中文汉字组合常不生效（只对数字/拉丁字母起作用） - Android 4.4–6.x 的 WebView：完全不识别该属性，
text-combine-upright: all被静默丢弃 - iOS 14 之前的 Safari：
digits 2可能压缩失败，显示为默认竖排而非单行
怎么检测并降级？
别靠 UA 判断，用 @supports 最可靠：
/* 基础竖排样式（所有浏览器都走这里） */
.vertical-num {
writing-mode: vertical-rl;
text-orientation: upright;
}
<p>/<em> 仅支持的浏览器才加压缩 </em>/
@supports (text-combine-upright: all) {
.vertical-num {
text-combine-upright: all;
}
}</p>
注意：@supports 检测的是语法支持，不是渲染效果。即使检测通过，Safari 也可能只压缩前两个字符——所以别指望它在所有设备上行为一致。
遇到压缩失败时，有什么替代方案？
当 text-combine-upright 不生效或效果异常，优先考虑轻量级 fallback：
- 对纯数字（如页码、价格），用
font-size缩小 +line-height: 1强制单行，视觉上接近压缩效果 - 对短英文缩写（如 “CPU”、“PDF”），包裹
<span></span>并设transform: rotate(-90deg)，再配合display: inline-block控制尺寸 - 避免对汉字使用
text-combine-upright: all—— 它本就不设计用于汉字，强行用只会触发浏览器回退到普通竖排
真正麻烦的不是兼容性开关，而是不同浏览器对“可压缩字符数”的隐式限制：Chrome 可能压 4 位数字，Safari 却只压前 2 位，且不报错、不提示。上线前必须在真机上逐个验证目标机型。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
