writing-mode 实现竖排需配套 text-orientation（推荐 mixed）、显式设置 height，并改用逻辑属性（如 text-align: start）；否则英文数字躺倒、内容塌陷、对齐错乱。
writing-mode 是实现 CSS 文本竖排最直接、语义最准确的方式，但只设 writing-mode: vertical-rl 不够，漏掉关键配套属性就会出错。
writing-mode 必须配 text-orientation，否则英文数字全躺倒
常见错误现象：中文竖排后，英文、数字、标点（如“2026年”“USD”“.”）全部顺时针旋转 90°，变成侧躺状态，阅读困难。
原因在于：writing-mode 只改文本流方向，不控制单字朝向；text-orientation 才决定字符是否旋转。
-
text-orientation: mixed：汉字直立，拉丁字母/数字/标点横向显示（推荐，最接近印刷效果） -
text-orientation: upright：所有字符强制直立（适合书法、标题等纯视觉场景） -
text-orientation: sideways：别用——它会让汉字也躺倒，完全违背中文竖排意图
示例：
立即学习“前端免费学习笔记（深入）”；
.vertical-text {
writing-mode: vertical-rl;
text-orientation: mixed;
}容器必须显式设置 height，否则内容塌成一条线
writing-mode: vertical-rl 会把原本的「行内方向」（inline direction）变成垂直方向，块级容器的默认 height: auto 就不再起作用——文字会无限压缩在极小高度里，看起来像一行挤在一起的字。
- 必须手动指定
height（或max-height+overflow-y: auto） - 若用
flex布局，注意justify-content和align-items的含义已翻转：原「水平居中」现在是「垂直居中」 - 避免依赖
min-height或fit-content，它们在竖排下行为不稳定
示例（带滚动）：
.vertical-scroll {
writing-mode: vertical-rl;
text-orientation: mixed;
height: 300px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
direction 和 text-align 在竖排下含义反转，容易误判对齐效果
设置 writing-mode: vertical-rl 后：
-
text-align: right实际表现为「顶部对齐」（因为此时「行」是垂直的，right = block-start） -
text-align: left表现为「底部对齐」 -
direction: rtl在竖排中影响的是「列序」，不是「字序」；多数中文场景可省略，但若混排阿拉伯文或需控制多列顺序时才需显式设
更稳妥的做法是改用逻辑属性：
- 用
text-align: start/end替代left/right - 用
margin-block-start替代margin-top，避免物理方向硬编码
竖排不是加个 writing-mode 就完事。真正卡住人的，往往是 text-orientation 没配、height 没设、或者还在用 margin-top 和 text-align: right 这类物理属性去“猜”对齐效果。这些地方一错，整个竖排就变成不可维护的视觉补丁。
