writing-mode: vertical-rl 是唯一语义正确、可复制、可访问的中文竖排方案，需配合 text-orientation: mixed 实现汉字直立、字母数字旋转、括号翻转，并要求块级容器、合理尺寸约束及适配竖排的 line-height 和 white-space。
writing-mode: vertical-rl 是唯一能真正实现语义正确、可复制、可访问的中文竖排方案。其他用 transform: rotate(90deg)、flex-direction: column 拆字或强行换行的方式，都会让复制乱序、光标跳错、屏幕阅读器失效。
必须配 text-orientation: mixed 才算完整
只写 writing-mode: vertical-rl 不够，中文竖排不是“把每个字转90°”，而是：汉字直立、拉丁字母和数字自动顺时针旋转90°、括号自动翻转为 )(。这正是 text-orientation: mixed 的作用：
- 设成
upright→ “2024” 变成四行小字，“HTML”变成一列直立的 H-T-M-L，不可读 - 不设或设错 → 数字可能横挤在一行，或倒置、错位
-
mixed是默认值，但显式声明更稳妥，尤其在旧版 Safari 或某些构建工具中会被忽略
容器必须是块级且有空间约束
writing-mode 在非块级元素上直接被忽略。常见失效原因不是 CSS 写错了，而是布局上下文拦住了它：
-
display: inline或inline-block→ 改成block或inline-flex - 父容器用了
float、position: absolute或display: table-cell→ 这些会触发旧式布局模式，writing-mode失效 - 没设
height、max-height或width→ 竖排文本会无限向下延伸（视觉上“消失”）或横向溢出；建议加height: 200px或max-height: 300px; overflow: hidden
换行和行高不能按水平习惯理解
竖排后，line-height 控制的是“列间距”（即字符之间的水平空隙），white-space 决定换列逻辑：
-
white-space: normal（默认）→ 允许在空格、顿号、逗号、句号后自然折列，适合长段落 -
white-space: pre-line→ 保留换行符\n，适合手动分段的诗句、题跋 -
white-space: nowrap→ 强制单列，文字直接横向溢出容器，根本看不到内容 -
line-height必须用无单位值（如1.6），避免用px；否则不同字号下间距失衡 -
padding和margin的方向也变了：padding: 0 1em实际是左右留白，在竖排下变成“右侧/左侧”留白；推荐改用逻辑属性：padding-inline-start、margin-block-end
真正难的不是写出那两行 CSS，而是意识到 writing-mode 改变的是整个文本流——它会影响内联顺序、flex 主轴、对齐行为，甚至影响 :first-letter 伪元素的定位。别把它当成一个“样式开关”，它是个布局模式切换器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
