writing-mode: vertical-rl 是唯一语义化竖排方案，需配 text-orientation: mixed 使汉字直立、字母数字自动旋转；失效主因是父容器非块级、触发旧布局或未设高度；换行用 white-space: normal 或 pre-line，line-height 必须用无单位值。
writing-mode: vertical-rl 是唯一能正确实现语义化、可选、可复制、支持屏幕阅读器的 HTML 竖排方案。其他用 transform: rotate(90deg)、flex-direction: column 拆字或旋转容器的方式，都会破坏文本流，导致复制乱序、光标错位、换行失控。
为什么 writing-mode: vertical-rl 必须配 text-orientation: mixed
中文竖排不是“把每个字转90°”，而是保持汉字直立、让拉丁字母和数字自动顺时针旋转90°以维持可读性。text-orientation: mixed 就是干这事的：
- 设成
upright→ 英文字母（如 “HTML”）变成一列直立的 H-T-M-L，完全不可读 - 不设或设错 → 数字 “2024” 可能横着挤在一行里，或倒置、错位
-
mixed下：汉字“你好”直立，“ABC”和“123”自动旋转，“（）”标点也会按竖排逻辑翻转为“）（”
writing-mode 不生效？先查这三处硬限制
90% 的“不生效”不是写错了，而是被布局规则拦住了：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 父容器是
display: inline或inline-block→writing-mode在非块级元素上被忽略；改成block或inline-flex - 用了
float、position: absolute或display: table→ 这些会触发旧式布局上下文，writing-mode失效 - 容器没设
height或max-height→ 竖排文本会无限向下延伸，视觉上“看不见效果”；必须给定高度或用flex/grid限定空间
竖排段落换行不能靠 <br>，得用 white-space
在 writing-mode: vertical-rl 下，<br> 会强制换“行”（即换列），但语义错乱、无法响应式折行，且破坏复制顺序：
- 长段落用
white-space: normal（默认）→ 允许在空格、顿号、逗号后自然折列 - 手动分段文案（如诗句、题跋）用
white-space: pre-line→ 保留换行符\n，但合并多余空格 - 绝对别用
white-space: nowrap→ 竖排下整段文字会直接横向溢出容器，根本看不到
最易被忽略的一点：竖排时 line-height 控制的是“列间距”，不是“行高”。用 px 值（如 line-height: 24px）会导致不同字号下间距失衡；始终用无单位值（如 line-height: 1.6），它才真正按当前字体大小缩放。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
