writing-mode 实现文字竖排或横排的核心是改变文本流方向而非旋转元素，竖排用 vertical-rl 搭配 text-orientation: mixed 或 upright，横排默认 horizontal-tb，多列竖排需结合 column-* 属性，现代浏览器原生支持但需注意尺寸逻辑翻转与兼容性前缀。
用 writing-mode 实现文字竖排或横排，核心是控制文本流方向——它不是旋转元素，而是真正改变书写逻辑，保留语义、可选性和无障碍支持。
竖排文字：中文古籍式排版
中文传统竖排采用从上到下、从右向左的阅读顺序，对应 writing-mode: vertical-rl：
- 设置容器样式：
writing-mode: vertical-rl（必须） - 指定容器高度（如
height: 400px），否则内容会塌成单行 - 搭配
text-orientation: mixed让汉字直立、英文字母自动顺时针旋转90°，标点也按规范调整方向 - 若需所有字符（包括英文）都直立显示（如书法题字），改用
text-orientation: upright
横排文字：还原默认或强制横排
横排是浏览器默认行为（writing-mode: horizontal-tb），但有时需显式重置或在竖排环境中局部恢复横排：
- 全局横排：不设
writing-mode即可，或明确写writing-mode: horizontal-tb - 局部横排（比如竖排段落中嵌入一个横排标题）：给该元素单独设置
writing-mode: horizontal-tb - 注意：横排下
text-orientation无效，该属性仅对垂直流生效
多列竖排布局
古籍、诗集等常需分栏竖排，可结合 CSS 多列模块：
- 容器设
writing-mode: vertical-rl，再加column-count: 2或3 - 用
column-gap: 1.5em控制列间距，column-rule: 1px solid #eee添加分隔线 - 固定容器高度（如
height: 600px）并设column-fill: auto，避免末尾列留白过多
兼容性与实用细节
现代浏览器（Chrome/Firefox/Safari/Edge）均原生支持 writing-mode，但仍建议：
- 旧项目可加前缀：
-webkit-writing-mode（Safari/旧Chrome）、-ms-writing-mode（IE11） -
vertical-lr适用于蒙古文等从左向右的竖排，中文场景慎用 - 竖排后，原本的
width变成“列宽”，height变成“行长”，布局尺寸逻辑翻转，需重新审视 padding/margin 方向
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
