writing-mode是目前最可靠、语义最清晰的原生CSS方案，能真正改变文本流方向；vertical-rl为中文竖排标准值，但需同步调整width/height含义、设置text-orientation: upright保持汉字直立，并重审flex/grid主轴逻辑。
writing-mode 是目前最可靠、语义最清晰的原生 CSS 方案，能真正改变文本流方向，不是靠旋转或 hack 实现的“假竖排”。
vertical-rl 是中文竖排的默认选择，但别直接套用
writing-mode: vertical-rl 确实是中文/日文传统竖排的标准值，但它会连带翻转整个布局坐标系：
- 原来的
width变成视觉上的高度 - 原来的
height变成视觉上的宽度 -
margin-left会出现在顶部，padding-bottom出现在右侧
常见错误是只加 writing-mode，却没调整尺寸和内边距，结果容器“缩成一条线”或文字被截断。
建议做法：
- 显式设置
width和height，并理解它们在竖排下的新含义 - 用
text-orientation: upright保持汉字不旋转（否则“一”会横着躺） - 行高用
line-height控制，但注意它此时作用于“列间距”，不是行间距
.poem {
writing-mode: vertical-rl;
text-orientation: upright;
width: 2em; /* 视觉上是“高度”，即每列多高 */
height: 20em; /* 视觉上是“宽度”，即总共几列 */
line-height: 1.8;
}
vertical-lr 和 sideways-rl 的使用场景很窄，慎用
vertical-lr 从左向右竖排，仅适用于蒙古文等极少数语言；普通中文项目基本用不到，强行使用反而让阅读顺序反直觉。
sideways-rl 和 sideways-lr 会让每个字符也旋转 90°，比如“你好”变成两个横躺的字。这在标签、侧边栏标题里偶尔有用，但：
- 兼容性差：Firefox 一直不支持
sideways-* - 可读性低：小字号下识别困难
- 无障碍问题：屏幕阅读器可能无法正确解析旋转后的字符顺序
除非明确需要“字横躺+列竖排”的设计效果，否则绕开这两个值。
writing-mode 影响 flex / grid 布局，必须重审容器逻辑
一旦父容器设置了 writing-mode: vertical-rl，其内部的 flex-direction 和 grid-template-columns 含义都会偏移：
-
flex-direction: row变成“从上到下”（即垂直方向） -
grid-template-columns: 1fr 2fr实际控制的是“行高分配”，不是列宽 -
justify-content对应的是水平轴，但在竖排中这个“水平轴”其实是页面的垂直方向
最容易踩的坑是：用 display: flex 想横向排列几个竖排文字块，结果它们叠成一列——因为 flex 主轴已随 writing-mode 转了 90°。
应对方式：
- 如果只是想让多个竖排段落并排，用
display: inline-block或float: right更可控 - 若坚持用 flex，显式写
flex-direction: column（在竖排上下文中，“column”才对应传统意义上的“横向”） - 测试时打开浏览器开发者工具，勾选“Layout → Show flexbox overlays”，直观看主轴方向
移动端和打印样式中，writing-mode 的行为更敏感
在 iOS Safari 或 Android Chrome 中，writing-mode 配合 font-size: small 或 zoom 缩放时，可能出现字符错位、基线偏移、甚至整列消失。这不是 bug，而是字体渲染引擎对垂直基线的支持不一致。
关键点：
- 不要依赖
em或rem做竖排容器的尺寸锚定，改用px或ch（ch在竖排中仍表示一个汉字宽度） - 打印样式表里禁用
writing-mode，除非你确认打印机驱动支持（多数不支持） - 如果内容要导出 PDF，
writing-mode在 Puppeteer / wkhtmltopdf 中表现不稳定，建议服务端用 Canvas 渲染竖排文字作为兜底
真正难的不是加那行 CSS，而是意识到：竖排不是“把字立起来”，而是一整套布局体系的重构。字体、尺寸、盒模型、甚至可访问性都要重新校准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
