CSS writing-mode 文字竖排

.vertical-article {
  writing-mode: vertical-rl;
  max-height: 400px;
  margin: 0 auto;
  padding: 20px;
  font-family: "Noto Serif CJK SC", "宋体", serif;
}

渲染效果：所有 <h2> 和 <p> 内的文字将变为从上到下排列，并且多个 <p> 块会从右向左依次排列，符合古诗竖排习惯。

常见坑点与修复

块尺寸计算方向改变

使用 vertical-rl 或 vertical-lr 时，CSS 盒模型中的宽度和高度逻辑会“旋转”：

• width 变为控制垂直方向的长度（即原本的高度方向）。
• height 变为控制水平方向的长度（即原本的宽度方向）。

因此，当您想限制竖排文本的垂直显示范围（即每列的高度），应设置 height；若要限制水平方向列的总宽度，应使用 width。例如：

.vertical-box {
  writing-mode: vertical-rl;
  height: 300px;   /* 控制一列竖排文字的最大高度 */
  width: 100%;     /* 控制所有列占用的水平总宽 */
}

文本溢出与滚动

当竖排文本超过容器高度时，块会向水平方向增长（如 vertical-rl 会向左方向新起一列）。如需让容器产生横向滚动条，可设置 overflow-x: auto，并确保容器有明确的宽度。

.scroll-container {
  writing-mode: vertical-rl;
  height: 200px;
  width: 100%;
  overflow-x: auto;
  white-space: nowrap; /* 防止内联换行干扰块级换列逻辑 */
}

行内元素与文本对齐

• 在竖排模式下，text-align 控制的是垂直方向的对齐（如 text-align: center 会使文字在垂直列内居中）。
• 水平方向的对齐需要使用 vertical-align 或弹性盒模型（flexbox）的 align-items 等属性。

标点符号与排版细节

竖排时通常标点符号会位移到文字的右侧中部，但不同浏览器的默认处理略有差异。为了获得更一致的排版效果，可以结合以下属性：

• text-orientation：设为 upright 可保持字符直立，常用于数字和英文缩写在竖排中的显示。
• text-combine-upright：让多个字符组合成直立显示（如 text-combine-upright: all 可将两三个数字合并显示为竖排中的一个方块，常用于年月日）。

.date {
  text-combine-upright: all;
  -ms-text-combine-horizontal: all; /* 旧版 IE 支持 */
}

进阶实战：响应式竖排布局

混合横竖排的内容编排

利用 writing-mode 可以轻松创建传统与现代混合的排版效果。例如，在一个横排页面中嵌入竖排引言或侧边栏：

<article class="horiz-article">
  <p>这里是普通的横排正文……</p>
  <aside class="vertical-quote">
    问君能有几多愁？恰似一江春水向东流。
  </aside>
</article>

.horiz-article {
  writing-mode: horizontal-tb;
  display: flex;
  gap: 2rem;
}

.vertical-quote {
  writing-mode: vertical-rl;
  padding: 1rem;
  border-left: 3px solid #c00;
  height: 300px;
}

表格的竖排表头

表格列数较多时，将表头竖排可以节省水平空间，保持可读性：

th {
  writing-mode: vertical-rl;
  text-orientation: upright; /* 保证字母和数字不旋转 */
  white-space: nowrap;
  height: 120px;
  padding: 0.5em;
}

浏览器兼容性与最佳实践

兼容性概览

¹ 从 IE8 开始支持，但需使用旧属性 -ms-writing-mode，值对应关系为：tb-rl 对应 vertical-rl，tb-lr 对应 vertical-lr。
² Chromium 内核浏览器尚未实现 sideways-*，但可通过 text-orientation: sideways 间接实现类似效果。

最佳实践建议

1. 优先使用 vertical-rl 和 vertical-lr，它们拥有最广泛的跨浏览器支持。
2. 为老旧 IE 添加前缀备选（如果仍需支持）：

   .vertical {
     -ms-writing-mode: tb-rl;       /* IE8+ */
     writing-mode: vertical-rl;     /* 现代浏览器 */
   }