text-orientation 必须与 writing-mode 配合使用才生效，单独设置会被浏览器静默忽略；仅在 vertical-rl 或 vertical-lr 模式下有效，中英混排推荐 mixed 值，需调整 line-height、letter-spacing 并选用支持竖排的字体，Safari 渲染存在差异需真机验证。
text-orientation 必须和 writing-mode 一起用才生效
单独写 text-orientation: mixed 或 text-orientation: upright，浏览器会静默忽略——DevTools 里该声明显示为灰色删除线，但控制台不报错，页面文字照常横排。这是最常见的“写了没反应”原因。
它不是独立排版属性，而是 writing-mode 进入垂直模式后的“修饰开关”。必须配合以下之一：
-
writing-mode: vertical-rl（中文竖排首选，从上到下、行从右向左） -
writing-mode: vertical-lr（如蒙古文，从上到下、行从左向右）
别用 writing-mode: horizontal-tb + text-orientation，完全无效。
中英混排优先选 text-orientation: mixed
这是现代中文网页竖排的默认且安全值。它让汉字直立，ASCII 字母和阿拉伯数字顺时针旋转 90°，括号、句号、顿号等标点自动适配方向——符合出版规范，可读性最强。
立即学习“前端免费学习笔记（深入）”；
常见错误是误以为 upright 更“整齐”，结果：
-
"HTML"变成每字母一行：HTML，失去语义 -
2026上下堆叠，数值感崩解 - 英文句号
.跑到行首，连字符-和斜杠/方向异常
除非是纯中文标题、印章式设计，否则一律回避 upright。
vertical-rl + mixed 组合下，line-height 和 font-family 得重调
竖排不是加两行 CSS 就完事。旋转后的英文字符高度略大于汉字，line-height: 1.2 容易显得过挤；建议起始值设为 line-height: 1.4，再微调。
letter-spacing 在竖排中实际控制的是“字与字之间的垂直偏移量”，不是水平间距——这点容易被忽略。
字体必须明确支持竖排：
- 推荐：
"Noto Serif CJK SC"、"Source Han Serif SC" - 慎用：
"SimSun"（Windows 自带），在新版 Chrome 中开启mixed可能触发字重异常
Safari 渲染差异必须真机验证
截至 2026 年 6 月，Safari 对 text-orientation 的支持仍有细微偏差：断行位置、标点悬挂、基线对齐可能和 Chrome/Firefox 不一致。
上线前务必在 iOS Safari 真机上检查，不能只靠模拟器或桌面 Safari。混合文本越复杂（比如含数字编号、嵌套英文短语、破折号连接词），渲染差异越明显。
