CSS文字垂直展示的5种实现方案

在网页设计中，文字垂直排列是常见的视觉需求，尤其在中文书法展示、导航菜单或艺术化排版场景中。本文将系统梳理CSS实现文字垂直展示的5种主流方法，从基础属性到高级技巧，为开发者提供完整的解决方案。

一、writing-mode属性：原生垂直排版方案

writing-mode是CSS3规范中专门用于控制文本方向的属性，支持三种取值：

• horizontal-tb：默认水平从左到右（top-bottom）
• vertical-rl：垂直从右到左（right-left）
• vertical-lr：垂直从左到右（left-right）

<div class="vertical-text">垂直排列文本</div>

.vertical-text {
  writing-mode: vertical-rl;
  height: 300px;
  border: 1px solid #ccc;
  padding: 20px;
}

实现原理：该属性通过改变文本基线的排列方向实现垂直效果，字符会自动旋转90度（除非配合text-orientation）。适用场景：中文竖排、日文竖写等传统排版需求。浏览器支持：现代浏览器均支持，IE需10+版本。

二、transform旋转：灵活的视觉变换

通过CSS的transform: rotate(90deg)可实现文字旋转，需配合transform-origin控制旋转基点：

.rotated-text {
  display: inline-block;
  transform: rotate(90deg);
  transform-origin: left top;
  position: absolute;
  left: 50px;
  top: 0;
}

关键细节：

1. 必须设置为inline-block或block元素
2. 旋转后元素占据的空间仍为原始尺寸，需手动调整定位
3. 连续文本需拆分为多个元素分别旋转

进阶技巧：结合transition可实现平滑旋转动画：

.rotated-hover:hover {
  transform: rotate(90deg) translateY(-20px);
  transition: all 0.3s ease;
}

三、Flexbox布局：结构化垂直排列

利用Flexbox的flex-direction: column可实现容器内元素的垂直排列，但需配合writing-mode处理字符方向：

.flex-vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 400px;
  border: 1px dashed #999;
}
.flex-vertical span {
  writing-mode: vertical-rl;
  margin: 10px 0;
}

优势：

• 保持HTML结构自然顺序
• 方便控制间距和对齐
• 响应式适应不同屏幕尺寸

典型应用：时间轴、步骤指示器等垂直流程展示。

四、text-orientation属性：精细控制字符方向

当writing-mode设置为垂直排列时，text-orientation可进一步控制字符方向：

• mixed：保持字符原始方向（英文竖排时字符仍横向）
• upright：强制字符直立（中文默认效果）
• sideways：字符侧向排列（类似旋转效果）

.upright-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 24px;
}

兼容性提示：该属性在Firefox中需加前缀-moz-text-orientation，Safari支持度较低。

五、SVG文本路径：艺术化垂直排版

对于复杂曲线排列需求，SVG的<textPath>元素提供终极解决方案：

<svg width="200" height="400">
  <path id="curvePath" d="M10,200 Q100,50 190,200" fill="none"/>
  <text font-size="16">
    <textPath href="#curvePath" startOffset="0%">
      沿路径排列的垂直文本
    </textPath>
  </text>
</svg>

实现要点：

1. 定义路径曲线（二次贝塞尔曲线示例）
2. 通过startOffset控制文本起始位置
3. 可结合rotate属性实现字符随路径旋转

性能优势：SVG方案在复杂排版中比CSS更高效，尤其适合长文本。

六、综合方案对比与选择建议

方法	适用场景	浏览器兼容性	性能影响
writing-mode	中文竖排、传统排版	优秀	低
transform	简单旋转、动画效果	优秀	低
Flexbox	结构化垂直布局	优秀	低
text-orientation	精细字符方向控制	部分支持	低
SVG文本路径	艺术化曲线排列	优秀	中

推荐策略：

1. 传统竖排优先选择writing-mode
2. 简单旋转使用transform
3. 复杂布局结合Flexbox与垂直属性
4. 艺术化需求采用SVG方案

七、常见问题解决方案

问题1：旋转后文字被截断
解决：设置足够的容器尺寸，或使用overflow: visible

.no-clip {
  overflow: visible;
  width: auto;
}

问题2：多行文本垂直排列错位
解决：为每行文本单独设置display: block

.vertical-line {
  display: block;
  writing-mode: vertical-rl;
}

问题3：英文竖排显示异常
解决：配合text-orientation: mixed或手动拆分单词

.english-vertical {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  word-break: break-all;
}

八、未来演进方向

随着CSS Text Layout Module Level 4的推进，以下特性值得关注：

1. text-combine-upright：合并多个字符为竖排单位
2. 增强的writing-mode控制选项
3. 更好的多语言混合排版支持

开发者应持续关注Can I Use网站的兼容性更新，合理使用@supports特性检测。

本文系统梳理了CSS实现文字垂直展示的核心技术方案，每种方法均包含原理说明、代码示例和适用场景分析。实际开发中，建议根据项目需求、浏览器兼容性和性能要求综合选择，必要时可组合使用多种技术实现复杂效果。掌握这些技巧后，开发者将能轻松应对各类垂直排版挑战，提升网页设计的艺术表现力。