HTML竖排文字排版教程

本文深入解析了HTML中实现真正语义化竖排文字的唯一可靠方案——`writing-mode: vertical-rl`，强调其在可访问性、文本可选性、复制准确性及屏幕阅读器支持上的不可替代性，并系统揭示了常见失效原因（如父容器非块级、旧布局触发、未设高度）、关键配合属性`text-orientation: mixed`对中西文混排的精准控制逻辑，以及竖排专属的换行策略（`white-space: normal`或`pre-line`）与无单位`line-height`的必要性，帮助开发者避开transform旋转、flex列排等破坏文本流的“伪竖排”陷阱，写出健壮、标准、可用的中文竖排网页。

writing-mode: vertical-rl 是唯一能正确实现语义化、可选、可复制、支持屏幕阅读器的 HTML 竖排方案。其他用 transform: rotate(90deg)、flex-direction: column 拆字或旋转容器的方式，都会破坏文本流，导致复制乱序、光标错位、换行失控。

为什么 writing-mode: vertical-rl 必须配 text-orientation: mixed

中文竖排不是“把每个字转90°”，而是保持汉字直立、让拉丁字母和数字自动顺时针旋转90°以维持可读性。text-orientation: mixed 就是干这事的：

• 设成 upright → 英文字母（如 “HTML”）变成一列直立的 H-T-M-L，完全不可读
• 不设或设错 → 数字 “2024” 可能横着挤在一行里，或倒置、错位
• mixed 下：汉字“你好”直立，“ABC”和“123”自动旋转，“（）”标点也会按竖排逻辑翻转为“）（”

writing-mode 不生效？先查这三处硬限制

90% 的“不生效”不是写错了，而是被布局规则拦住了：

• 父容器是 display: inline 或 inline-block → writing-mode 在非块级元素上被忽略；改成 block 或 inline-flex
• 用了 float、position: absolute 或 display: table → 这些会触发旧式布局上下文，writing-mode 失效
• 容器没设 height 或 max-height → 竖排文本会无限向下延伸，视觉上“看不见效果”；必须给定高度或用 flex/grid 限定空间

竖排段落换行不能靠
，得用 white-space

在 writing-mode: vertical-rl 下，
会强制换“行”（即换列），但语义错乱、无法响应式折行，且破坏复制顺序：

• 长段落用 white-space: normal（默认）→ 允许在空格、顿号、逗号后自然折列
• 手动分段文案（如诗句、题跋）用 white-space: pre-line → 保留换行符 \n，但合并多余空格
• 绝对别用 white-space: nowrap → 竖排下整段文字会直接横向溢出容器，根本看不到

最易被忽略的一点：竖排时 line-height 控制的是“列间距”，不是“行高”。用 px 值（如 line-height: 24px）会导致不同字号下间距失衡；始终用无单位值（如 line-height: 1.6），它才真正按当前字体大小缩放。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~