text-orientation 必须与 writing-mode 成对使用才生效，仅在 vertical-rl 或 vertical-lr 下作用；mixed 适配中英混排，upright 易致阅读障碍；Safari 需真机验证，字体与行高须专项调优。
text-orientation 单独写无效，必须和 writing-mode 成对出现，否则浏览器直接忽略——这是 90% 的“没反应”根源。
为什么写了 text-orientation: mixed 却没效果？
因为该属性根本不是独立生效的排版开关。它只在垂直流中起作用，且仅响应以下两种 writing-mode 值：
-
writing-mode: vertical-rl（中文竖排主流选择，从上到下、行从右向左） -
writing-mode: vertical-lr（如蒙古文，从上到下、行从左向右）
如果你用了 writing-mode: horizontal-tb 或压根没设 writing-mode，text-orientation 就是废代码——DevTools 里会显示灰色删除线，但控制台不报错，页面照常横排。
mixed 和 upright 在中英混排时的实际表现差异
选错值会导致英文可读性崩坏，不是“不好看”，而是“看不懂”：
立即学习“前端免费学习笔记（深入）”；
-
mixed：汉字直立，“HTML”旋转 90° 成一列（H→T→M→L），数字和标点自动适配方向，符合出版规范 -
upright：所有字符强制直立，“HTML”变成每字母占一行，句号.跑到行首，连字符-和斜杠/方向错乱，纯视觉干扰
除非是纯中文标题或印章式设计，否则一律用 mixed。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
Safari 真机验证不可跳过
截至 2026 年 6 月，Safari 对 text-orientation 的渲染仍有偏差：
- 断行位置可能和 Chrome/Firefox 不一致
- 标点悬挂（如顿号、括号）基线对齐偏移
- 某些字体下
letter-spacing行为异常
模拟器不够，必须用 iOS 真机访问测试页；尤其涉及长段落或复杂标点时，差 1px 都可能影响阅读节奏。
字体与行高必须同步调优
竖排不是加两行 CSS 就完事。旋转后的英文字符高度略大于汉字，line-height: 1.2 容易挤成糊状；建议起始值设为 line-height: 1.4，再微调。
letter-spacing 在竖排中实际控制的是“字与字之间的垂直偏移量”，不是水平间距——这点极易被忽略。
字体必须明确支持竖排：
- 推荐：
"Noto Serif CJK SC"、"Source Han Serif SC" - 慎用：
"SimSun"（Windows 自带），新版 Chrome 中启用mixed可能触发字重异常
真正卡住人的，从来不是属性本身，而是 writing-mode 没配对、Safari 没真机测、字体没挑对这三件事。
