writing-mode: vertical-rl 需配合 text-orientation: upright 实现古诗竖排，否则标点英文字母歪斜；line-height 控制字间垂直距，width 控制单列字数，text-align: right 使列右对齐，overflow-y 控制纵向滚动。
writing-mode 能直接实现古诗词竖排，但光设 vertical-rl 不够——字符方向、行间距、对齐、溢出控制全得同步调整，否则文字歪斜、换行错乱、阅读体验崩坏。
vertical-rl 是基础，但必须配 text-orientation: upright
默认 writing-mode: vertical-rl 下，汉字直立，但英文字母和数字会自动顺时针旋转 90°，古诗里夹带的标点（如“！”“？”）或作者名拼音就变成横躺状态，破坏整体感。text-orientation: upright 强制所有字符保持直立，这才是古籍原貌。
常见错误：只写 writing-mode，漏掉 text-orientation，结果标点横着飘在行间。
-
text-orientation: mixed（默认）→ 中文直立，英文/数字/标点旋转 → 不适合纯古诗 -
text-orientation: upright→ 全部字符直立 → 推荐用于古诗、题跋、落款 -
text-orientation: sideways→ 全部旋转 → 基本不用
行高、字距与容器尺寸要重新理解
在 vertical-rl 模式下，CSS 的 height 变成“行长”，width 变成“列宽”。一行能塞多少字，取决于 width；而整段能排几行，取决于 height。
所以：line-height 控制的是**字与字之间的垂直距离**（即上下字间距），不是传统水平排版里的“行距”概念；letter-spacing 控制的是**同一列中相邻字符的横向间隙**（即左右字距）。
- 古诗常用
line-height: 1.6–2.2，留白更疏朗 -
letter-spacing: 0.1em–0.3em避免字挨太紧，模拟竹简刻痕感 -
width设为固定值（如width: 2em）可控制单列字数，避免自动折行打乱诗句结构
对齐方式容易反直觉：用 text-align 控制“列位置”，不是“行位置”
水平排版里 text-align: right 把文字推到右边；但在 vertical-rl 下，text-align 控制的是**每列文字在容器中的左右位置**——也就是“列左对齐”还是“列右对齐”。古诗从右向左书写，视觉上要靠右，实际应设 text-align: right。
如果用 Flex 布局包裹多行诗句，align-items: flex-end 才对应“靠右”，因为主轴已随 writing-mode 旋转。
- 单行诗句容器：用
text-align: right - 多行
flex容器：用align-items: flex-end+flex-direction: column - 避免用
margin-left: auto，它在竖排下行为不可预测
溢出和滚动方向会反转，overflow-x 变成“上下滚”
writing-mode 改变文本流后，overflow-x 和 overflow-y 的含义也跟着翻转：在 vertical-rl 下，内容超长时是**纵向溢出**（即从上往下超出），此时起作用的是 overflow-y，而不是你以为的 overflow-x。
典型场景：长诗超出容器高度，需要滚动阅读。必须写 overflow-y: auto，且确保父容器有明确 height，否则滚动条不出现。
- 错误写法：
overflow-x: auto→ 滚动失效 - 正确写法：
overflow-y: auto+height: 400px - 移动端慎用：竖排+滚动在小屏上手指操作反直觉，建议限制单屏显示行数
writing-mode: vertical-rl，而是所有相关属性的语义都已悄悄调转——height/width、overflow-x/overflow-y、甚至 text-align 的逻辑，全都得按新坐标系重想一遍。漏掉任意一个，排版就“看起来像竖排，读起来不像古诗”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
