writing-mode: vertical-rl 是竖排唯一合理起点，但必须搭配 text-orientation（推荐 upright）、显式设置 height/max-height、避免在 flex 容器上直接使用，并改用逻辑属性如 text-align: start 和 margin-block: auto。

直接说结论：用 writing-mode: vertical-rl 是唯一合理起点，但只写这一行必出错——文字歪、容器塌、中英文混排难看、对齐反直觉，全是默认行为“太诚实”导致的。

为什么 writing-mode: vertical-rl 必须搭配 text-orientation

单独设 writing-mode: vertical-rl 后，汉字能竖着，但英文字母、数字、半角标点会顺时针旋转 90° 躺倒，这不是 bug，是规范默认行为（text-orientation: mixed）。出版级效果要求汉字直立、西文可读，就得显式控制：

• text-orientation: mixed：汉字直立，西文/数字躺倒（适合古籍类界面，但需接受视觉割裂）
• text-orientation: upright：所有字符强制直立（推荐用于现代电子书，尤其含术语、人名、URL 的场景）
• 绝对别用 text-orientation: sideways——它会让汉字也躺倒，彻底失去中文竖排意义

容器高度塌成一条线？那是没设 height 或 max-height

writing-mode: vertical-rl 会把块级容器的「内联方向」变成垂直，此时 height: auto 失效，文字被压缩到极小高度，视觉上像挤在一起的一横条。必须手动干预：

• 给容器设明确 height（如 height: 600px），此时该值实际控制的是“列宽”，不是传统高度
• 若内容长度不确定，用 max-height: 80vh + overflow-y: auto 实现滚动
• 避免用 min-height 或 fit-content，它们在竖排下行为不可靠
• 注意：设了 writing-mode 后，原先的 width 反而控制“行长”，别漏调

用 flex 布局做翻页按钮或目录栏？别在父容器上加 writing-mode

把 writing-mode: vertical-rl 直接加在 display: flex 的父元素上，会和 flex-direction 冲突——主轴定义被重载，justify-content 和 align-items 含义全反，按钮堆叠溢出或消失是常态。

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

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

下载

• 正确做法：只对纯文本块（如 <p></p>、<div class="page-content">）应用 <code>writing-mode
• 若要做竖排导航栏（如章节目录），优先用 flex-direction: column + text-orientation: upright，更可控
• 真要用 transform: rotate(90deg) 模拟竖排，注意屏幕阅读器兼容性受损，且缩放时文字边缘易糊

text-align: right 突然变成顶部对齐？这是逻辑方向切换的必然结果

启用 writing-mode: vertical-rl 后，“物理方向”语义失效：text-align: right 实际变成「块起始端对齐」即顶部对齐，text-align: left 反而是底部对齐。这容易引发布局错位。

• 改用逻辑值：text-align: start（对应顶部）、text-align: end（对应底部）
• 垂直居中用 margin-block: auto，而不是 margin-top/margin-bottom
• 行高控制用 line-height，但注意其单位在竖排下影响的是“字距垂直间距”，非传统行高

真正麻烦的不是写几行 CSS，而是意识到 writing-mode 不是样式开关，而是重定义整个盒模型的方向语义——高度变宽度、top 变 block-start、right 变 start。漏掉任一配套项，页面就卡在“看起来差不多但总不对劲”的状态里。