中文竖排必须用writing-mode: vertical-rl，因其严格对应“从上到下、从右到左”的传统阅读流；vertical-lr会导致镜像翻转，transform: rotate(90deg)破坏DOM流和可访问性。
writing-mode 是实现纯CSS竖排文本最直接、最标准的方式，无需JS、不依赖旋转变形，浏览器原生支持且语义正确。
vertical-rl 与 vertical-lr 的选择依据
中文、日文传统排版必须用 vertical-rl：文字从上到下排列，行序从右向左（即第一行在最右侧），符合古籍阅读习惯。而 vertical-lr 是从左向右排行，视觉上像把整段文字“镜像翻转”，仅适合特殊设计或蒙古文等少数语言场景。
常见错误是误用 vertical-lr 做中文竖排，结果所有行反向堆叠，用户需从左往右读——这违背中文阅读逻辑。
- 用
vertical-rl：中文、日文、韩文竖排首选 - 用
vertical-lr：仅当明确需要“左起列序”时（如现代海报标题） - 避免混用
direction: ltr或rtl覆盖默认行为——writing-mode: vertical-rl已隐含direction: rtl的块级流向
text-orientation 控制字符朝向
只设 writing-mode 不够，标点、数字、拉丁字母会默认水平显示，破坏整体竖排感。这时必须加 text-orientation：
立即学习“前端免费学习笔记（深入）”；
-
text-orientation: mixed：汉字/假名直立，标点（，。！？）和西文字符保持水平——这是中文网页最常用组合 -
text-orientation: upright：所有字符强制直立（包括英文字母），适合书法展示或强调形式感的场景 -
text-orientation: sideways：所有字符统一顺时针旋转90°，极少使用，易读性差
注意：text-orientation 在 Safari 15.4+ 和 Chrome 102+ 才完全稳定，旧版 iOS Safari 可能忽略该声明，需实测。
容器尺寸与布局适配要点
竖排后，原本的 width 变成“列宽”，height 变成“行长”。若未显式设置高度，单行文本可能被压缩成一条线。
- 必须给容器设
height（如height: 300px）或使用min-height防止塌陷 - 行高用
line-height控制字间距，推荐line-height: 1.6～2.0，避免拥挤 - 若需多列并排（如仿古籍双栏），不要用
float，改用display: flex+flex-direction: column，再对每列单独设writing-mode: vertical-rl - 慎用
white-space: nowrap：它会让长文本溢出容器而不换行，竖排中换行靠的是“行长”（即容器height），不是字符数
兼容性兜底与常见失效原因
现代浏览器（Chrome 87+、Firefox 41+、Safari 14.1+、Edge 79+）均原生支持 writing-mode，但仍有三类典型失效：
- 微信小程序基础库 transform: rotate(90deg) 回退，且要配合
transform-origin和display: inline-block - CSS 文件未被正确加载或被其他规则覆盖：检查 computed styles 中
writing-mode是否生效，优先级不足时加!important临时验证 - 父容器设置了
overflow: hidden且高度不足：竖排文本实际高度 = 字体大小 × 行数 × 行高，很容易被裁切
真正容易被忽略的是：竖排文本中，text-align 的含义会反转——text-align: right 变成“对齐到列尾”（即顶部），text-align: left 反而是“对齐到列首”（底部）。调试时别凭直觉猜方向。
