必须配合 writing-mode 使用，单独设 text-orientation 无效；vertical-rl + mixed 是中英文混排竖排的默认解法，cjk文字直立、拉丁字母和数字自动旋转90度，适用于中文古籍、日文小说等场景。
必须配合 writing-mode 使用，单独设 text-orientation 无效。
vertical-rl + mixed：中英文混排竖排的默认解法
这是最常用组合，适用于中文古籍、日文小说等场景。浏览器自动判断字符类型：CJK文字垂直直立，拉丁字母和数字水平旋转90度。
常见错误现象：text-orientation: mixed 单独写在非垂直流元素上完全没效果；或误以为它能控制水平布局中的“字间距方向”。
实操建议：
- 务必先设
writing-mode: vertical-rl（右→左竖排）或vertical-lr（左→右竖排） -
mixed是默认值，可省略不写，但显式写出更易维护 - 注意内边距：竖排后
padding-top变成“顶部到第一行文字顶部的距离”，实际是横向空间，容易误判 - 若出现英文单词被截断，检查父容器
height是否足够——竖排下 height 对应的是“行数”，不是“字符高度”
vertical-rl + upright：强制所有字符直立，适合书法/标题
所有字符（含 A-Z、0-9）都保持正立、不旋转，视觉上像把每个字“立着放”，符合传统竖排审美。
容易踩的坑：
- 拉丁字母直立后可读性骤降，别用在长段落英文里
- 数字“123”直立显示时，视觉宽度变窄，可能引发对齐错位，需配合
text-combine-upright: all压缩为单字宽 - 某些字体（尤其非CJK优化字体）对
upright支持不稳定，测试时务必覆盖 Safari 和 Firefox
vertical-lr + sideways：蒙古文等从左向右竖排的正确姿势
sideways 不是“侧翻”，而是让所有字符顺时针转90度，使原本横排的阅读习惯在竖排容器中延续。搭配 writing-mode: vertical-lr 才符合蒙古文规范。
使用场景有限，但一旦用错就彻底不可读：
- 绝对不要在
vertical-rl下配sideways——会导致字符朝向与阅读流冲突 - 该组合下，
text-align: left实际对齐的是“竖排容器的顶部”，不是左侧 - 部分旧版 Edge（≤79）对
sideways渲染异常，建议加@supports (text-orientation: sideways)特性查询兜底
兼容性与 fallback 的真实约束
Chrome 48+、Firefox 41+、Edge 79+、Safari 10.1+ 均支持，但 Safari 对 text-combine-upright 支持较弱，且所有浏览器都不支持在 input 或 textarea 中应用 text-orientation。
关键提醒：没有可靠的 CSS fallback 方案。如果必须支持 IE 或老安卓 WebView，只能用 transform: rotate(90deg) + 宽高互换模拟，但会破坏文本可选性、SEO 和屏幕阅读器识别——这不是“退化”，是功能降级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
