纯CSS实现网页竖排文字：从基础到进阶方案

在中文网页设计中，竖排文字常用于古籍展示、书法艺术、日式排版等场景。传统实现方式依赖图片或JavaScript，但现代CSS提供了更高效、更灵活的解决方案。本文将系统讲解如何仅用CSS实现专业级竖排文字效果。

一、CSS竖排文字的核心原理

1.1 writing-mode属性详解

writing-mode是CSS Writing Modes Module Level 3规范的核心属性，定义文本的排列方向：

.vertical-text {
  writing-mode: vertical-rl; /* 从右向左竖排 */
  /* 或 */
  writing-mode: vertical-lr; /* 从左向右竖排 */
}

vertical-rl：主流竖排方式，符合中文古籍排版习惯
vertical-lr：适用于蒙古文等从左向右的竖排文字
horizontal-tb：默认水平排列（用于重置）

1.2 text-orientation属性配合

当使用竖排时，text-orientation控制字符方向：

.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed; /* 保持中文直立，拉丁字母旋转 */
  /* 或 */
  text-orientation: upright; /* 所有字符保持直立 */
}

mixed：中文保持直立，拉丁字母旋转90度（推荐）
upright：所有字符强制直立（可能影响可读性）
sideways：所有字符侧向排列（实验性）

二、基础竖排实现方案

2.1 简单竖排文本块

<div class="simple-vertical">
  <p>这是竖排显示的文本内容</p>
</div>

.simple-vertical {
  writing-mode: vertical-rl;
  height: 300px; /* 需要指定高度 */
  border: 1px solid #ccc;
  padding: 20px;
}

关键点：必须为容器设置明确高度，否则内容会横向扩展导致布局问题。

2.2 多列竖排布局

结合CSS Columns实现复杂排版：

.vertical-columns {
  writing-mode: vertical-rl;
  column-count: 3;
  column-gap: 2em;
  height: 500px;
}

适用场景：古籍分栏排版、诗歌竖排等需要多列显示的场景。

三、进阶排版技巧

3.1 标点符号处理

竖排时标点应位于文字右侧：

.vertical-text {
  writing-mode: vertical-rl;
  text-combine-upright: all; /* 压缩数字/字母为单字符宽度 */
}

特殊处理：

/* 中文标点调整 */
.vertical-text::after {
  content: "。";
  display: inline;
}

3.2 表格竖排实现

表格竖排需要同时处理表头和数据：

.vertical-table {
  writing-mode: vertical-rl;
}
.vertical-table th {
  writing-mode: horizontal-tb; /* 表头保持水平 */
  display: block;
}

完整示例：

<table class="vertical-table">
  <tr>
    <th>姓名</th>
    <td>张三</td>
  </tr>
</table>

3.3 响应式竖排设计

通过媒体查询适配不同设备：

.responsive-vertical {
  writing-mode: horizontal-tb;
}
@media (min-width: 768px) {
  .responsive-vertical {
    writing-mode: vertical-rl;
  }
}

最佳实践：移动端默认水平，桌面端竖排显示。

四、浏览器兼容性解决方案

4.1 兼容性现状

浏览器	支持版本	注意事项
Chrome	48+	完全支持
Firefox	41+	需要-moz前缀
Safari	10.1+	部分属性需要-webkit前缀
Edge	79+	与Chrome一致
IE	不支持	需使用JavaScript回退方案

4.2 渐进增强方案

.vertical-text {
  /* 现代浏览器方案 */
  writing-mode: vertical-rl;
  /* 旧版Firefox */
  -moz-writing-mode: vertical-rl;
  /* 旧版Safari */
  -webkit-writing-mode: vertical-rl;
  /* 回退方案 */
  transform: rotate(90deg); /* 仅作示意，实际不适用 */
}

推荐做法：先检测支持情况，再决定是否启用竖排。

五、实际应用案例分析

5.1 古籍电子书实现

.ancient-book {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  line-height: 2.5;
  column-count: 2;
  column-gap: 3em;
  max-width: 800px;
  margin: 0 auto;
}

效果增强：

.ancient-book p {
  text-indent: 1em; /* 首行缩进 */
  margin-bottom: 1.5em;
}

5.2 日式海报设计

.japanese-poster {
  writing-mode: vertical-rl;
  font-family: "Hiragino Mincho ProN", serif;
  background: url(washi-pattern.png);
  padding: 2em;
  border: 3px solid #8B4513;
}

字体建议：使用@font-face引入专业日文字体。

六、性能优化建议

避免过度使用：竖排会改变文本流，可能影响渲染性能

合理使用硬件加速：

.vertical-text {
  will-change: transform; /* 提示浏览器优化 */
}

减少重排：固定容器高度，避免动态内容导致重排

七、常见问题解决方案

7.1 英文单词换行问题

.vertical-text {
  word-break: break-all; /* 强制换行 */
  /* 或 */
  overflow-wrap: break-word; /* 推荐方案 */
}

7.2 滚动条方向

竖排时滚动条默认在左侧，可通过CSS调整：

.vertical-container {
  scrollbar-gutter: stable both-edges;
}

7.3 与Flex/Grid布局冲突

.container {
  display: flex;
  flex-direction: column; /* 竖排时可能需要调整 */
}
.vertical-text {
  writing-mode: vertical-rl;
  align-self: flex-start; /* 手动调整对齐 */
}

八、未来展望

CSS Writing Modes Level 4正在扩展更多功能：

text-combine-upright: digits 4（压缩4位数字为单字符宽度）
改进的标点符号处理
更好的多语言支持

开发者建议：持续关注CSS规范更新，优先使用标准属性而非浏览器前缀。

通过系统掌握这些CSS技术，开发者可以高效实现各种竖排文字需求，无需依赖图片或JavaScript。从简单的文本块到复杂的古籍排版，纯CSS方案都能提供优雅的解决方案。在实际项目中，建议结合具体需求选择合适的实现方式，并始终进行跨浏览器测试以确保兼容性。