直接用 writing-mode: vertical-rl + text-orientation: mixed 可实现古籍式竖排，需显式设容器高度、用无单位 line-height 控制字列间距、letter-spacing 调垂直字距、margin-right 控段落间距，并选用支持竖排的中文字体。
直接用 writing-mode: vertical-rl + text-orientation: mixed 就能实现符合古籍习惯的竖排，但行间距不是调 line-height 那么简单——它在竖排里变成水平方向的间距，数值过小会挤字，过大则断行错乱。
vertical-rl 是唯一靠谱的竖排取值
别用 vertical-lr，它会让括号、引号、数字顺序反向，中文阅读时明显违和；vertical-rl 才是传统右起竖排的正确流向。配合 text-orientation: mixed，汉字直立，英文字母和阿拉伯数字自动顺时针转 90°，标点（如“，”“。”“）”）也能对齐到右侧，不用手动替换为「、」「。」「（」。
- 必须显式设置容器高度（如
height: 400px），否则内容可能塌缩或溢出 - 禁用
direction: rtl或unicode-bidi相关属性，它们会干扰括号和数字的双向重排 - 字体要选支持竖排的中文字体（如「霞鹜文楷」、「思源宋体」），系统默认的「微软雅黑」部分标点竖排显示异常
line-height 在竖排里控制的是“字列间距”
竖排下，line-height 不再是上下行距，而是左右两列汉字之间的水平空隙。设成 1.2 往往太紧，1.8 是安全起点；单位必须用无单位数值（如 1.8），避免像素值在缩放时失准。
-
line-height: 1.8对应约 1.8 倍字号宽度的列间距，比24px更可靠 - 如果发现字符轻微重叠，优先加
line-height，而不是靠margin-right补救 - 不要给竖排容器设
white-space: nowrap，它会阻止自动换行，导致文字横向溢出
letter-spacing 和段落间距得反着想
竖排时，letter-spacing 控制的是上下相邻字符的垂直距离（即“字距”），而段落间距得用 margin-left 或 margin-right 实现——因为段落方向已旋转 90°。
- 中文竖排推荐
letter-spacing: 0.05em～0.15em，微调即可，过大破坏节奏感 - 两个竖排段落之间加间距，写
margin-right: 1.5em（不是margin-bottom） - 若用
text-orientation: upright，所有字符强制直立，英文完全不可读，仅适合纯中文且不混排的极简场景
真正容易被忽略的是字体回退和复制行为：用户复制竖排文本时，浏览器仍按 DOM 顺序输出（从上到下、从右到左），但粘贴后未必保持可读顺序；如果必须支持复制，得提前告知用户或改用 SVG 渲染——CSS 竖排本质是视觉重排，不是语义重排。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
