writing-mode: vertical-rl 是唯一真正语义化、可选可复制且支持屏幕阅读器的HTML竖排方案，需搭配text-orientation: mixed确保中英文标点正确显示，并注意容器布局、换行及行高设置。
writing-mode: vertical-rl 是唯一能真正实现语义化、可选、可复制、支持屏幕阅读器的 HTML 竖排方案。其他用 transform: rotate(90deg)、flex-direction: column 或手动拆字的方式，都会破坏文本流——复制出来是乱序字符，光标无法准确定位，换行逻辑失控。
vertical-rl 必须配 text-orientation: mixed
只写 writing-mode: vertical-rl 不够，中文会直立，但 “ABC” 和 “123” 会横躺或倒置，括号方向错乱（比如「(」跑右边、「)」跑左边）。text-orientation: mixed 才是关键配合：
- 汉字保持 upright（直立）
- ASCII 字母和数字自动顺时针旋转 90°，变成可读形态
- 中文标点（如，。！？）按竖排上下文自动翻转适配，例如「()」显示为「)(」
- 别用
text-orientation: upright——它会让 “API 2024” 显示成一列小字，完全不可读
容器 display 和布局模式必须兼容
writing-mode 在非块级上下文中会被忽略。常见失效不是属性写错了，而是被父级或自身布局规则拦住：
- 父容器是
display: inline或inline-block→ 改成display: block或display: inline-flex - 用了
float、position: absolute或display: table→ 这些触发旧式布局，writing-mode失效 - 没设宽度（
width）→ 竖排下width控制的是“每列占多少水平空间”，不设就无法折列，文字直接溢出 - 容器设了
height→ 竖排内容可能被截断；建议用min-height或让高度由内容自然撑开
换行不能靠 <br>，得靠 white-space
在 writing-mode: vertical-rl 下，<br> 会强制换“列”，但语义错乱、无法响应式折行，且复制时换行符位置丢失：
立即学习“前端免费学习笔记（深入）”；
- 长段落用
white-space: normal（默认）→ 允许在空格、顿号、逗号后自然折列 - 诗句、题跋等手动分段文案用
white-space: pre-line→ 保留换行符\n，但合并多余空格 - 绝对禁用
white-space: nowrap→ 整段文字会横向无限延伸，根本看不到效果 -
line-height必须用无单位值（如1.6），避免 px 值在不同字号下挤压或撑开
真正难的不是写出那两行 CSS，而是理解 writing-mode 不是一个孤立样式——它会重定义整个文本流的方向、对齐基线、换行逻辑和标点行为。稍有遗漏（比如忘了重置 direction 或用了不支持竖排的字体），就会出现括号反向、数字堆叠、光标跳位等难以调试的问题。
