必须用 vertical-rl 而非 vertical-lr，因中文传统竖排为“从上到下、从右到左”，vertical-rl 严格匹配该逻辑，而 vertical-lr 会导致段落并列、括号倒置、标点错位。
writing-mode: vertical-rl 是目前唯一能真正实现语义正确、可复制、可访问的中文竖排方案。其他方式（如 transform: rotate(90deg)、拆字 flex、br 换行）都会破坏文本流，导致复制乱序、光标错位、屏幕阅读器失效。
为什么必须用 vertical-rl 而不是 vertical-lr
中文传统竖排是“从上到下、从右到左”——vertical-rl 严格匹配这一逻辑：每行文字自上而下堆叠，新段落出现在左侧（整块内容向左推进）。而 vertical-lr 是“从上到下、从左到右”，会导致：
- 两段文字左右并列，阅读顺序反了
- 括号方向错乱：
(出现在下方、)在上方 - 引号、顿号、破折号位置偏移，标点换行异常
writing-mode 不生效？先查这三处
语法写对了但没效果，大概率是布局上下文不支持：
- 父容器是
display: inline或inline-block→ 改成block或inline-flex - 元素被
float、position: absolute或display: table-cell包裹 → 这些会脱离文档流，writing-mode失效 - 容器没设宽度（竖排下
width控制的是“每列占多少水平空间”）或white-space: nowrap→ 文字无限向下延伸或直接溢出；建议加width: 2em或max-height: 200px; overflow: hidden
混合中英文时，text-orientation: mixed 是标配
只写 writing-mode: vertical-rl 不够，必须配 text-orientation: mixed：
立即学习“前端免费学习笔记（深入）”；
-
mixed：汉字直立，ASCII 字母和数字自动顺时针旋转 90°，括号自动翻转适配 - 别用
upright：会让 “2024” 显示成四行小字，且阅读顺序错乱 - 也别用
sideways：所有字符横躺，不可读 - 纯数字短串（如页码）可单独设
text-orientation: upright，但仅限 2–4 个连续数字
line-height 和 padding 在竖排下容易误判
竖排后，line-height 的作用方向不变，但视觉表现会变“宽”：
-
line-height: 2在竖排下 = 2 倍字号宽度 → 推荐用无单位值（如1.6）或1.6em -
padding: 0 1em实际是「上下为 0，左右各 1em」→ 竖排下变成「右/左留白」，易混淆；建议改用逻辑属性：padding-block（书写流前后）和padding-inline（书写流左右） -
margin同理，margin-block-start在vertical-rl下实际作用于右侧
真正难的不是写对那两行 CSS，而是意识到 writing-mode 改变的是整个文本流——它会影响换行、对齐、内联元素顺序、甚至 flex 主轴方向。稍不注意，图标就跑错边，按钮顺序就颠倒。动手前，先确认容器是否干净、是否被其他布局规则干扰。
