中文竖排必须用writing-mode: vertical-rl，因其严格匹配“从上到下、从右到左”传统阅读流，确保语义正确、布局稳定与可访问性达标；vertical-lr仅适用于蒙古文等特殊场景，中文使用会导致段落顺序颠倒、标点错位。
writing-mode: vertical-rl 是目前唯一能正确支持中文竖排语义、可选、可复制、兼容屏幕阅读器的方案，其他旋转或 flex 拆字都是权宜之计。
vertical-rl 和 vertical-lr 到底该选哪个
中文场景下，vertical-rl 是唯一推荐值：文字从上到下，行从右向左推进，符合传统出版逻辑；vertical-lr 虽然也垂直，但行方向从左到右，会导致中文标点（如，。！？）不自动旋转、换行错位，Firefox 中尤其容易断词异常。日文部分现代排版可能用 vertical-lr，但中文项目请直接排除它。
text-orientation 必须配，否则英文字母全躺倒
只设 writing-mode 不够，拉丁字母、数字、ASCII 标点默认会“侧躺”90°，比如 “API v2.1” 变成一列歪斜字符。必须加 text-orientation: mixed（浏览器默认值，但显式声明更稳妥），它让汉字直立、英文字母和数字自动水平显示。若内容含大量英文缩写（如 “HTTP”, “JSON”），改用 text-orientation: upright 更可控——所有字符强制直立，但注意这会让纯英文段落可读性下降。
writing-mode 不生效？先查这三处硬限制
常见失效不是语法写错，而是被布局规则压制：
-
display不能是inline或inline-block—— 改为block或inline-flex - 父容器用了
float或position: absolute—— 这些会触发旧式布局，writing-mode被忽略 - 没设明确宽度（如
width: 6em）—— 竖排需要浏览器知道“一行多宽”，否则换行逻辑崩溃，整段挤成一行溢出
另外，IE11 仅支持 -ms-writing-mode: tb-rl，且不支持 text-orientation；现代项目可忽略 IE，无需加前缀。
line-height、white-space 和 word-break 怎么调才不乱
竖排后 line-height 仍控制“行间距”，但方向已转为垂直，建议用无单位数值（如 line-height: 1.5），避免 px 值在字号变化时失衡。换行靠 white-space 控制：normal 允许在空格、标点处折行，适合长段落；pre-line 保留换行符 \n，适合手动分段；绝对不要用 white-space: nowrap，它会禁用中文“字级换行”，导致文字直接溢出。若含英文单词（如 “JavaScript”），加上 word-break: keep-all 防止字母间断开。
字体本身的支持度常被忽略：思源黑体、Noto Sans CJK 表现稳定，而某些自定义字体或系统默认字体（如 Windows 的微软雅黑）在竖排下可能出现标点偏移或字距异常，上线前务必在目标环境实测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
