中文竖排必须用writing-mode: vertical-rl，因其严格对应“从上到下、从右到左”的传统阅读流，确保语义正确、布局稳定与可访问性达标；vertical-lr仅适用于蒙古文，transform旋转会破坏文本选择、复制及屏幕阅读器支持。
writing-mode: vertical-rl 是当前唯一能正确实现中文竖排的 CSS 方案，其他方式（如 transform: rotate(90deg)）会破坏文本可选性、复制顺序和屏幕阅读器支持。
writing-mode 值怎么选：vertical-rl 还是 vertical-lr？
中文竖排必须用 writing-mode: vertical-rl，不是“可选”，而是语义与渲染逻辑的硬性要求：
-
vertical-rl：文字从上到下，行从右到左——对应传统中文/日文排版，括号、顿号、引号等标点位置正确，换行逻辑自然 -
vertical-lr：仅适用于蒙古文等少数语言；用于中文时，会导致右括号)出现在左侧、数字列错位、text-align: right行为反直觉 -
sideways-rl：整行顺时针转 90°，每个字仍正立——只适合表头旋转，且 Firefox ≤63、Safari ≤12.1 不支持
text-orientation 必须配 mixed，别乱设 upright
text-orientation 控制单个字符朝向，它和 writing-mode 是协作关系，不是可有可无的装饰：
-
mixed（默认且推荐）：汉字直立，ASCII 字母和数字自动顺时针旋转 90°，中文标点（如《》、【】、——）按上下文智能调整方向 -
upright：强制所有字符直立——英文变成一串无法识别的竖列字母，API 名、代码片段、单位符号（如px、MB）全部不可读 - Chrome 和 Firefox 对括号在
mixed下的渲染位置略有差异，若内容含大量英文术语，可加unicode-bidi: plaintext抑制双向重排
容器样式不配对，writing-mode 就失效
writing-mode 不是“写了就生效”的属性，它依赖块级布局上下文：
- 父容器是
display: inline或inline-block→writing-mode被忽略，需改为block或inline-flex - 用了
float或position: absolute→ 触发旧式布局模式，竖排逻辑中断 - 容器没设
height（而设了width）→ 竖排后内容溢出或高度塌陷，因为此时height才是“行长”，width反而控制字间距方向 - IE11 需降级：用
@supports (writing-mode: vertical-rl)检测，不支持时改用display: block; width: 1em; line-height: 1.8模拟单字一行
line-height 和 white-space 在竖排下怎么调才不崩
竖排后，“行”已变成垂直方向，但 line-height 的计算逻辑不变，只是视觉节奏变了：
-
line-height推荐用无单位数值（如1.6），避免px值在字号变化时失衡；过小（）导致字贴太近，过大（<code>> 2.0）显得空洞 - 换行靠
white-space控制：normal允许在空格/标点处折行，pre-line保留换行符但合并空格；绝对不要用nowrap，否则文字直接横向溢出容器 -
letter-spacing在竖排中作用方向不变，但值建议缩小（如0.05em），否则字距拉得太开，破坏竖排紧凑感
真正容易被忽略的是双向文本干扰——哪怕只在一个 span 里写了 direction: rtl，也可能让中文括号翻转、数字列偏移。竖排中文容器应显式重置为 direction: ltr，并避免嵌套 bdi 或 dir 属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
