CSS 竖直文字排列技巧

概述

在前端开发中，有时需要将文字竖直排列显示，如以下效果：

话不多说，奉上可调试的演示效果，大家可以先体验一番呢

核心样式代码

// 竖直文字排列
.vertical-text() {
    writing-mode: vertical-rl;
    text-orientation: upright;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

属性详解

1. writing-mode: vertical-rl

• 作用: 设置文本的书写方向为垂直方向，从右到左排列
• 可选值:
  • vertical-rl: 垂直方向，从右到左
  • vertical-lr: 垂直方向，从左到右
  • horizontal-tb: 水平方向（默认值）

2. text-orientation: upright

• 作用: 控制文字在垂直模式下的方向
• 可选值:
  • upright: 文字保持正立状态
  • mixed: 混合模式，数字和拉丁字母会旋转90度
  • sideways: 所有字符都旋转90度

3. text-align: center

• 作用: 文本水平居中对齐
• 在垂直模式下: 控制文本在垂直轴上的对齐方式

4. display: flex

• 作用: 启用弹性布局
• 配合: 与 align-items 和 justify-content 一起使用

5. align-items: center

• 作用: 在交叉轴（水平方向）上居中对齐
• 效果: 确保文字在容器中水平居中

6. justify-content: center

• 作用: 在主轴（垂直方向）上居中对齐
• 效果: 确保文字在容器中垂直居中

使用示例

HTML 结构

<div class="vertical-container">
  <span class="vertical-text">竖直文字</span>
</div>

CSS 应用

.vertical-container {
  width: 100px;
  height: 200px;
  border: 1px solid #ccc;
}

.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

适用场景

1. 中文标题设计: 传统中文排版中的竖排标题
2. 侧边栏标签: 垂直导航栏中的文字标签
3. 装饰性文字: 设计中需要竖直排列的装饰文字
4. 表格标题: 表格中需要竖直显示的列标题
5. 移动端设计: 在有限的水平空间中显示更多文字

浏览器兼容性

属性	Chrome	Firefox	Safari	Edge	IE
writing-mode	48+	41+	10.1+	12+	不支持
text-orientation	48+	41+	10.1+	79+	不支持

注意事项

1. 字体选择: 某些字体在竖直模式下可能显示效果不佳
2. 数字和英文: 使用 text-orientation: mixed 可以让数字和英文字母水平显示
3. 容器尺寸: 确保容器有足够的高度来容纳竖直文字
4. 响应式设计: 在不同屏幕尺寸下测试竖直文字的显示效果

扩展技巧

混合文字方向

.mixed-vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed; /* 数字和英文会旋转90度 */
}

从左到右的竖直排列

.vertical-lr-text {
  writing-mode: vertical-lr; /* 从左到右排列 */
  text-orientation: upright;
}

总结

这个CSS样式组合通过合理使用 writing-mode、text-orientation 和 Flexbox 布局，实现了完美的竖直文字排列效果。它不仅保证了文字的正确方向，还确保了在容器中的居中对齐，是一个实用且优雅的解决方案。