writing-mode: vertical-rl 是唯一真正可用的竖排方案，必须配 text-orientation: mixed 以确保汉字直立、英文字母和数字自动顺时针旋转90°可读、中文标点自动翻转，而 transform 或 flex 等方式会导致复制乱序、阅读器失效。
writing-mode: vertical-rl 是唯一真正可用的方案，其他方法（比如 transform: rotate(90deg)、flex-direction: column 或手动拆字）都会让文字不可选、复制乱序、屏幕阅读器读错，且换行逻辑完全失控。
为什么 writing-mode: vertical-rl 必须配 text-orientation: mixed
只写 writing-mode 不生效，是因为拉丁字母和数字默认会“侧躺”90°，比如 “API 2024” 变成一列歪斜字符；括号方向也错乱（「(」跑右边、「)」跑左边）。text-orientation: mixed 才是关键：
- 汉字、中文标点（，。！？）保持 upright（直立）
- ASCII 字母和数字自动顺时针旋转 90°，变成可读形态
- 中文括号自动翻转为「)(」，符合竖排语义
别用 text-orientation: upright——它会让中英文混排段落变成密密麻麻的小竖条，纯英文缩写如 “HTTP” 完全不可读。
writing-mode 不生效？先检查这三处硬限制
失效通常不是语法错，而是被布局规则压制：
-
display是inline或inline-block→ 改成block或inline-flex - 父容器用了
float、position: absolute或display: table→ 这些触发旧式布局，writing-mode被忽略 - 没设明确
width（如width: 6em）→ 竖排需要浏览器知道“一行多宽”，否则换行崩溃，整段溢出
另外，height 尽量别硬设；用 min-height 或让高度由内容自然撑开，避免截断。
竖排下的换行、对齐和内联元素怎么处理
竖排后 white-space 和 text-align 行为全变了：
-
text-align: center居中的是“每行顶部”，视觉上就是整段垂直居中；left/right对应顶部/底部对齐 -
white-space: normal（默认）允许在空格、顿号、逗号后自然折列；适合长段落 -
white-space: pre-line保留换行符\n，适合诗句、题跋等手动分段文案 - 内联元素（
span、strong）默认不响应writing-mode，必须显式设display: inline-block或block
最稳妥的做法：用 div 或 p 包一层，统一设 writing-mode，别依赖内联标签继承。
真正难的不是写那两行 CSS，而是当竖排文字混着西文单位（如 “kg”、“v2.1”）、数学符号（±、×、÷）、全角/半角括号时，text-orientation 的边界行为、字体本身的竖排支持度、以及 iOS Safari 下 touch 坐标映射偏差——这些细节，模拟器测不出来，必须真机点一遍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
