writing-mode 切换文本流方向而非旋转文字，需配套设置text-orientation、height、text-align等属性；vertical-rl适用于中日文竖排，vertical-lr用于蒙古文；text-orientation: mixed是中日文竖排刚需。

writing-mode 能直接切换文本流方向，但不是“旋转文字”——它改变的是块级容器的书写上下文，所以布局行为、盒模型、甚至 margin 和 padding 的逻辑都会随之变化。用错值或忽略配套属性，很容易出现文字挤成一团、换行异常、高度塌陷等问题。

vertical-rl 和 vertical-lr 的实际区别

中文古籍、日文出版物默认用 vertical-rl：每行从上到下，行与行从右往左排列；vertical-lr 则是行从上到下、行与行从左往右，蒙古文排版必需。别凭直觉选——vertical-lr 在中文场景下会让标题出现在左侧、正文在右侧，视觉顺序完全反了。

• vertical-rl 下，text-align: right 表示文字贴右（即贴容器顶部），text-align: left 反而贴左（即贴容器底部）
• vertical-lr 中，text-align 含义恢复为水平习惯：left = 贴左（顶部），right = 贴右（底部）
• 两者都要求显式设置容器 height，否则内容可能不显示或高度为 0

text-orientation 必须配合使用

只设 writing-mode，英文、数字、标点会默认躺倒（90° 顺时针），阅读困难。text-orientation: mixed 才能让汉字/假名保持直立、拉丁字符自动旋转，这是中日文竖排刚需。

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

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

下载

• text-orientation: upright：所有字符强制直立（西文可读性差）
• text-orientation: sideways：所有字符统一侧向（类似老式电影字幕，少用）
• IE11 不支持 mixed，需降级为 upright 并接受西文不可读

多列竖排时 column-gap 和 height 的陷阱

用 column-count + writing-mode: vertical-rl 做古籍分栏，column-gap 的单位仍是逻辑上的“行间距”，不是像素意义上的横向间隔——它实际表现为列与列之间的垂直空白，容易误判尺寸。

• 容器 height 必须足够容纳所有列内容，否则末尾文字被截断
• column-fill: auto（默认）会导致各列高度不均；改用 column-fill: balance 更自然
• 移动端 Safari 对 column- 系列属性在竖排下的支持不稳定，建议加 @supports (writing-mode: vertical-rl) and (column-count: 2) 条件包裹

真正难的不是写对那行 writing-mode: vertical-rl，而是后续所有相关属性（text-orientation、height、text-align、direction）都要按新坐标系重新理解——稍一疏忽，就变成“看起来写了，但根本不对”。

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