text-orientation必须与writing-mode配合使用，仅设text-orientation无效；mixed是中英混排竖排的默认推荐值，使汉字直立、ASCII字符顺时针旋转90°，符合出版规范。
text-orientation必须和writing-mode一起用
单独设 text-orientation 没有效果，浏览器会直接忽略。它只是个“辅助属性”，只在 writing-mode 为 vertical-rl 或 vertical-lr 时才起作用。如果你写了 text-orientation: mixed 但没配 writing-mode，控制台不会报错，但文字照样横着排。
mixed 是中文竖排的默认且推荐值
text-orientation: mixed 让汉字保持直立，ASCII 字母和数字顺时针旋转 90°，括号、句号等标点也会自动适配方向——这是最符合传统出版习惯的方案。常见错误是误以为 upright 更“整齐”，结果英文变成一列无法识别的竖线，比如 “HTML” 显示成：
H T M L
这不是排版，是断字。
- 混合文本（中英混排、带数字标题）一律优先用
mixed -
upright仅适合纯中文场景，或设计强制要求所有字符物理朝向一致（如印章效果） -
sideways几乎不用：它会让所有字符横向堆叠，实际效果接近未竖排
vertical-lr + upright 组合容易出视觉陷阱
有人想让英文也“像汉字一样竖着读”，就写 writing-mode: vertical-lr; text-orientation: upright。表面看每个字母都占一行，但问题立刻暴露：
立即学习“前端免费学习笔记（深入）”；
- 标点位置错乱：英文句号
.会出现在行首而非行尾 - 连字符
-和斜杠/方向异常，阅读节奏被打断 - 数字序列如
2026变成上下排列，丧失数值可读性 - 某些字体（尤其非等宽字体）下字母宽度不均，导致左右错位
真正需要英文竖向对齐的场景，应优先考虑 SVG 文本或分字符 span + transform: rotate(90deg)，而不是依赖 text-orientation: upright。
别忽略 font-family 和 line-height 的连锁影响
竖排时，line-height 实际控制的是“行间距”，也就是字与字之间的垂直距离；而 letter-spacing 控制的是同一行内字符的水平偏移——但在竖排下，这个“水平”其实是垂直方向上的字距。所以：
- 中文字体必须支持竖排（如
"Noto Serif CJK SC"、"Source Han Serif SC"），Windows 默认的"SimSun"在部分 Chrome 版本中会出现字重异常 -
line-height: 1.2在竖排中可能显得过挤，建议从1.4起调 - 若开启
text-orientation: mixed，旋转后的英文高度会略大于汉字，此时line-height需兼顾两者基线对齐
复杂点在于：这些参数在不同浏览器渲染引擎里表现不一，尤其是 Safari 对 text-orientation 的支持仍存在细微偏差，上线前务必在真机上验证混合文本的断行与对齐。
