writing-mode 是 HTML5 实现真垂直排版的核心属性，需配合 text-orientation、line-height、text-align 等使用，vertical-rl 更适配中文竖排，但须注意字体支持与浏览器兼容性。
writing-mode 是 HTML5 中控制文字排列方向的核心 CSS 属性，它能真正实现文字垂直排列（从上到下或从下到上），不是靠旋转、伪元素或 flex 堆砌出来的“假垂直”。但直接写 writing-mode: vertical-rl 很可能在中文段落里出现标点错位、换行异常、对齐失效等问题——关键不在“能不能”，而在“怎么配”。
vertical-rl 和 vertical-lr 的实际区别
两者都让文字垂直排列，但默认书写方向相反：vertical-rl 从右往左排版（符合传统中文竖排习惯），vertical-lr 从左往右（类似日文部分排版）。浏览器默认将 vertical-rl 视为“主垂直模式”，因此：
-
vertical-rl下，中文标点（如，。！？）会自动旋转 90° 并靠右对齐，更符合出版规范 -
vertical-lr下，部分标点（尤其是全角符号）可能不旋转，或被强制水平显示，导致视觉断裂 - Firefox 对
vertical-lr的 line-breaking 支持弱于 Chrome，长段落易出现断词错误
必须配合的三个 CSS 属性
单独设 writing-mode 几乎无法正常显示中文竖排，以下三项需同步设置：
-
text-orientation: mixed：让拉丁字母和数字保持水平（如 “Windows 11”、“2024” 不歪斜），否则全被竖过来 -
line-height必须显式指定（如line-height: 1.6），否则垂直排版下浏览器可能按块级高度计算行距，导致行间过大或挤压 -
text-align: center或text-align: start要明确，因为vertical-rl下start指“顶部”，end指“底部”，left/right失效
常见错误：中文标点挤成一列或换行错乱
典型现象是逗号、句号堆在字右侧边缘，或整段文字只显示第一行。根本原因是未启用 Unicode 双向算法支持和东亚文本换行规则：
立即学习“前端免费学习笔记（深入）”；
- 加
unicode-bidi: plaintext防止嵌套dir属性干扰 - 确保父容器有明确宽度（如
width: 5em），否则垂直排版时浏览器无法判断“一行多长”，导致换行逻辑崩溃 - 避免在垂直文本内使用
white-space: nowrap，它会禁用中文特有的“字级换行”，造成溢出 - 若含英文单词，建议用
word-break: keep-all防止在字母间断开（如 “JavaScript” 被切成 “Java” 和 “Script”）
div.vertical-text {
writing-mode: vertical-rl;
text-orientation: mixed;
line-height: 1.5;
text-align: center;
unicode-bidi: plaintext;
width: 6em;
word-break: keep-all;
}
复杂点在于：不同字体对 writing-mode 的支持程度差异很大，思源黑体、Noto Sans CJK 表现稳定，而某些自定义 WebFont 若未包含垂直度量信息（vertical metrics），标点位置仍可能偏移。上线前务必在 Safari、Chrome、Firefox 中实测真实文本，别只看单字效果。
