必须设height或max-height，因vertical-rl下块级容器默认高度由内容宽度之和决定，易塌缩或无限拉伸；text-orientation选upright可实现古籍全字符直立效果，mixed则适配中日韩混排标点自动翻转。
writing-mode: vertical-rl 是实现古风竖排最直接、语义正确且浏览器支持良好的方式。其他方案（如 transform: rotate(90deg)）会导致文本不可选、无法复制、SEO 不友好，且响应式表现差。
为什么必须设 height 或 max-height？
竖排时，文本流方向变为垂直，块级容器默认高度由内容撑开——但“内容高度”在 vertical-rl 下是字符总宽度之和，而非预期的纵向高度。不设高会导致容器塌缩成一条线或无限拉伸。
- 必须显式设置
height、max-height或使用flex/grid约束尺寸 - 若内容长度不确定，推荐用
max-height+overflow: auto - 配合
line-height使用时，注意其作用方向已变为“行间垂直距离”，不是水平间距
text-orientation 怎么选才不乱？
竖排时，默认 text-orientation: mixed 会让中文直立、英文字母旋转90°；但古籍排版常要求所有字符（包括标点、数字、拉丁字母）都直立显示，此时需强制设为 upright。
-
mixed：适合纯中文或中日韩混排，标点自动适配竖排位置 -
upright：适合仿竹简、书法类设计，所有字符保持直立，但英文单词会变成“逐字换行”，需配合white-space: nowrap或分词处理 - 避免用
sideways——它会让所有字符统一旋转，破坏中文阅读习惯
多列竖排怎么对齐又不重叠？
用 display: flex 或 display: grid 布局列，每列单独应用 writing-mode: vertical-rl，比用 column-count 更可控。
-
flex方案更易控制列宽和间距：gap控制列间空隙，flex-basis控制单列宽度 - 避免在
vertical-rl容器上直接用text-align: left/right——此时left对应顶部对齐，right对应底部对齐 - 若需文字在列内居中，用
text-align: center（竖排下即垂直居中），再配合padding调整边距
真正容易被忽略的是标点悬挂和换行逻辑：writing-mode 虽自动优化中文标点位置，但遇到破折号、省略号或西文括号时仍可能错位；若内容含用户输入或 CMS 动态文本，务必测试各种边界字符组合，必要时用 word-break: keep-all 防止断字错误。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
