必须配text-orientation: mixed、显式设height、改用逻辑属性，否则中文竖排会出现英文数字躺倒、内容塌陷、对齐反直觉三类问题：writing-mode只改文本流方向，text-orientation才控制字符朝向；vertical-rl下height: auto失效需手动设高；flex/grid中主轴和对齐含义翻转，须用逻辑属性替代物理方向。
只设 writing-mode: vertical-rl 不够，必须配 text-orientation、显式设 height、改用逻辑属性，否则中文竖排会出三类典型问题：英文数字躺倒、内容塌成一条线、对齐方向反直觉。
为什么 writing-mode: vertical-rl 后英文数字全躺倒？
因为 writing-mode 只改文本流方向（从左到右 → 从上到下），不控制单个字符是否旋转；真正决定“汉字直立、英数横排”还是“全部侧躺”的是 text-orientation。
-
text-orientation: mixed：汉字直立，拉丁字母/数字/常见标点（如2026、USD、.）保持横向——这是中文网页竖排最常用、最接近印刷效果的取值 -
text-orientation: upright：所有字符强制直立（适合按钮文字、标签等需快速识别英文的场景） -
text-orientation: sideways：别用——它会让汉字也顺时针转90°，完全违背中文竖排意图
为什么竖排后文字挤成一条细线，高度没了？
writing-mode: vertical-rl 会把块级容器的「行内方向」翻转为垂直方向，导致 height: auto 失效——浏览器不再按内容撑高，而是无限压缩高度。
- 必须显式设置
height或max-height，例如：height: 300px - 若内容超长需滚动，加
overflow-y: auto和-webkit-overflow-scrolling: touch - 避免用
min-height或fit-content，它们在竖排下行为不可靠 - 注意：此时原
width属性实际控制的是“视觉高度”，height控制的是“视觉宽度”
writing-mode 放在 flex/grid 容器上会怎样？
会翻转主轴定义，导致子项排列错乱。例如：display: flex; flex-direction: row 在 writing-mode: vertical-rl 下，实际表现为“从上到下堆叠”，justify-content: center 变成“垂直居中”，而非你预期的水平居中。
- 不要给
flex或grid父容器设writing-mode - 只在需要竖排的文本块内部使用，例如：
正文
- 若需整列导航文字竖排，优先考虑
flex-direction: column+transform: rotate(90deg)（但注意可访问性和缩放兼容性） - 必须用逻辑属性替代物理方向：用
margin-block-start替margin-top，用text-align: start替text-align: left
中文竖排该选 vertical-rl 还是 vertical-lr？
vertical-rl 是中文、日文传统竖排标准：文字从上到下，行从右到左——第一行出现在最右侧，符合阅读直觉。而 vertical-lr 是蒙古文等极少数语言专用，中文项目误用会导致“第一行在最左边”，视觉顺序颠倒。
- 简体中文、繁体中文、日文竖排一律用
writing-mode: vertical-rl -
vertical-lr仅用于蒙古文或特殊古籍复刻场景，普通项目不要碰 - 别混用
direction: rtl——它在竖排中影响的是“列序”（多列布局时哪列在前），不是“字序”，中文单列场景基本不需要
真正难的不是写对那两行 CSS，而是理解 writing-mode 会重定义整个坐标系：尺寸含义、对齐方向、盒模型行为全跟着变。一旦习惯用物理方向写样式（比如 top、left、flex-direction: row），竖排就会处处反直觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
