一、竖排文字的常见应用场景

竖排文字在中文排版中具有独特的美学价值，常见于传统书籍装帧、诗歌排版、书法展示以及现代设计中的文化元素呈现。例如古籍书页的右至左阅读方式、日式海报的纵向标题、移动端竖屏应用的标题设计等场景，都需要通过CSS实现文字垂直排列。

在响应式设计中，竖排文字能有效解决窄屏设备的显示问题。当屏幕宽度受限时，将文字转为竖向排列可以保持内容完整性，避免横向滚动带来的不良体验。这种布局方式特别适用于手机端H5页面、智能手表应用等小屏幕场景。

二、CSS竖排文字实现原理

1. writing-mode属性详解

writing-mode是CSS Writing Modes Module Level 3规范中的核心属性，它控制文本的流向方向。该属性支持三个主要值：

horizontal-tb：默认值，水平从左到右排列
vertical-rl：垂直从右到左排列（中文古籍常用）
vertical-lr：垂直从左到右排列（蒙古文等文字系统）

.vertical-text {
  writing-mode: vertical-rl;
}

2. text-orientation属性配合

当使用垂直排版时，text-orientation属性控制字符的显示方向。主要值包括：

mixed：保持字符原始方向（推荐用于中文）
upright：强制字符正立显示
sideways：字符侧向显示

.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

3. 浏览器兼容性处理

现代浏览器对writing-mode的支持良好，但需注意：

IE/Edge旧版本需要-ms-前缀
Safari需要-webkit-前缀
移动端Android 4.4+支持完善

建议使用Autoprefixer工具自动添加浏览器前缀，确保跨平台兼容性。

三、完整实现方案

1. 基础竖排实现

<div class="vertical-container">
  <div class="vertical-text">
    这里是需要竖排显示的文本内容，
    支持多行文字自动换行排列。
  </div>
</div>

.vertical-container {
  width: 200px; /* 需要设定固定宽度 */
  height: auto;
  border: 1px solid #ddd;
  margin: 20px;
}
.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  line-height: 1.8; /* 调整行高提升可读性 */
  font-size: 16px;
  padding: 10px;
}

2. 响应式竖排设计

@media (max-width: 768px) {
  .vertical-container {
    width: 120px;
    margin: 10px auto;
  }
  .vertical-text {
    font-size: 14px;
    letter-spacing: 0.5px; /* 小屏幕增加字间距 */
  }
}

3. 复杂场景处理

混合排版解决方案

.mixed-layout {
  display: flex;
  flex-direction: row;
}
.horizontal-section {
  flex: 1;
  writing-mode: horizontal-tb;
}
.vertical-section {
  width: 150px;
  writing-mode: vertical-rl;
  margin-left: 20px;
}

动画效果实现

@keyframes verticalScroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}
.scrolling-vertical {
  writing-mode: vertical-rl;
  overflow: hidden;
  animation: verticalScroll 20s linear infinite;
}

四、常见问题解决方案

1. 标点符号位置异常

中文标点在垂直排版时默认会出现在行首，可通过以下方式调整：

.vertical-text {
  text-combine-upright: all; /* 合并数字为竖向排列 */
}

2. 英文单词换行问题

.vertical-text {
  word-break: break-all; /* 强制断词 */
  /* 或 */
  overflow-wrap: break-word; /* 智能断词 */
}

3. 性能优化建议

避免在竖排容器中使用过多浮动元素
复杂动画建议使用transform而非left/top定位
对长文本考虑使用CSS Columns实现分栏

五、实际应用案例分析

1. 诗词排版实现

<div class="poem-container">
  <div class="poem-title">静夜思</div>
  <div class="poem-content">
    <div>床前明月光</div>
    <div>疑是地上霜</div>
    <div>举头望明月</div>
    <div>低头思故乡</div>
  </div>
</div>

.poem-container {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: "SimSun", serif;
  line-height: 2.5;
}
.poem-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 30px;
}
.poem-content div {
  margin-bottom: 20px;
}

2. 移动端竖屏导航

.vertical-nav {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 15px;
}
.vertical-nav a {
  display: block;
  margin: 10px 0;
  text-decoration: none;
}

六、进阶技巧与注意事项

1. 与Flex/Grid布局结合

.vertical-grid {
  display: grid;
  grid-template-columns: 150px auto;
  writing-mode: vertical-rl;
}
.vertical-grid .sidebar {
  grid-row: 1 / span 2;
}

2. 打印样式优化

@media print {
  .vertical-text {
    writing-mode: print-only; /* 特定打印方向 */
    font-size: 12pt;
  }
}

3. 无障碍访问建议

为竖排内容添加aria-orientation: vertical属性
确保键盘导航在竖排元素中正常工作
提供横向排版的备用方案

七、未来发展趋势

随着CSS Writing Modes Level 4规范的推进，未来将支持更精细的文本流向控制。例如：

text-combine-upright的扩展功能
垂直排版下的基线对齐改进
多语言混合排版的增强支持

开发者应持续关注W3C规范更新，及时调整实现方案。同时，考虑使用PostCSS等工具预处理CSS，确保对新特性的兼容支持。

通过系统掌握div+css的竖排文字技术，开发者不仅能够解决传统排版需求，更能创造出具有独特视觉效果的创新设计。建议在实际项目中先进行小范围测试，逐步优化参数，最终实现完美的竖向文本布局。”

CSS竖排文字指南：div布局与样式深度解析