中文竖排必须用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：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 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 反而是“对齐到列首”（底部）。调试时别凭直觉猜方向。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！