在网页开发中，竖排文字是一种特殊的排版方式，常见于中文、日文等垂直书写语言的展示场景，或为了追求独特的视觉效果，CSS提供了多种方法实现竖排文字，开发者可以根据需求选择合适的技术方案,以下将详细介绍几种主流的实现方式及其适用场景。
writing-mode 属性实现竖排文字
writing-mode 是 CSS 中专门控制文本书写方向的属性，通过设置不同的值可以实现文字的垂直排列，该属性有三个主要值：horizontal-tb（水平从上到下，默认值）、vertical-rl（垂直从右到左）和 vertical-lr（垂直从左到右），vertical-rl 和 vertical-lr 是实现竖排文字的关键。
使用方法示例：
.vertical-text {
writing-mode: vertical-rl; /* 垂直从右到左排列 */
writing-mode: vertical-lr; /* 垂直从左到右排列 */
}
需要注意的是，writing-mode 属性在现代浏览器中兼容性良好，但在 IE 浏览器中需要添加 -ms- 前缀，-ms-writing-mode: tb-rl;，使用该属性时，文字的排列方向会发生变化,标点符号也会自动调整位置以适应竖排布局。
text-orientation 属性调整文字方向
text-orientation 属性用于控制字符的朝向，通常与 writing-mode 属性配合使用，该属性有两个常用值：mixed（默认值，字符保持正常朝向）和 upright（字符始终保持垂直朝向），当需要实现纯竖排文字（如英文字母也垂直排列）时，可以设置 text-orientation: upright;
示例代码：
.upright-text {
writing-mode: vertical-rl;
text-orientation: upright;
}
这种组合方式特别适合处理混合语言（如中英文混排）的竖排场景，英文字母会垂直排列,而不会像默认情况下那样横躺显示。
使用 transform 旋转实现竖排效果
对于不支持 writing-mode 属性的旧浏览器，或者需要更灵活控制文字方向时，可以通过 transform 属性的 rotate() 方法实现文字旋转，这种方法的核心是将文字容器旋转90度,同时调整宽度和高度以保持布局稳定。
实现步骤：
- 创建一个容器包裹需要竖排的文字
- 对容器应用 transform: rotate(90deg) 旋转
- 调整容器的宽度和高度，因为旋转后元素的尺寸会发生变化
示例代码：
.rotate-text {
transform: rotate(90deg);
width: 200px; /* 调整后的宽度 */
height: 100px; /* 调整后的高度 */
display: inline-block;
}
这种方法的缺点是文字的排列方向是从上到下，无法直接实现从右到左的竖排，且需要手动调整布局参数,兼容性较好但灵活性较低。
使用 flex 布局配合 flex-direction 实现竖排
对于需要将多个元素垂直排列的场景（如导航菜单），可以使用 flex 布局的 flex-direction: column 属性，这种方法虽然不是严格意义上的文字竖排,但可以实现元素的垂直堆叠效果。
示例代码：
.flex-vertical {
display: flex;
flex-direction: column;
align-items: center;
}
这种方法适用于需要将多个块级元素垂直排列的情况，每个元素会占据一行,从上到下依次排列。
不同实现方式的对比分析
为了更直观地比较各种竖排文字方法的优缺点,以下表格总结了关键特性：
| 实现方式 | 兼容性 | 控制精度 | 适用场景 | 标点符号处理 |
|---|---|---|---|---|
| writing-mode | 现代浏览器良好，IE需前缀 | 高，支持多种书写方向 | 多语言竖排文本 | 自动调整 |
| text-orientation | 现代浏览器 | 中，控制字符朝向 | 混合语言竖排 | 需配合writing-mode |
| transform | 兼容性好 | 低，仅能旋转 | 简单竖排效果 | 需手动调整 |
| flex布局 | 兼容性好 | 中，控制元素排列 | 块级元素垂直排列 | 不适用 |
注意事项
- 行高和字间距调整：竖排文字时，通常需要调整 line-height 和 letter-spacing 属性以优化阅读体验
- 容器尺寸控制：使用 transform 旋转时，要注意容器宽高的调整，避免布局错乱
- 响应式设计：竖排文字在移动设备上可能需要特殊处理，避免占用过多屏幕空间
- 可访问性：确保竖排文字的阅读顺序符合逻辑，不影响屏幕阅读器的解析
在实际项目中，推荐优先使用 writing-mode 属性，因为它提供了最标准和灵活的竖排文字解决方案，同时具有良好的浏览器兼容性，对于复杂的竖排布局需求，可以结合 text-orientation 和 flex 布局共同实现。
相关问答FAQs
问题1：竖排文字在移动端显示异常怎么办？
解答：移动端显示异常通常是由于容器宽度或视口适配问题导致的，解决方案包括：1) 使用 viewport 单位设置容器尺寸，如 width: 50vw; 2) 添加媒体查询调整竖排文字在移动端的显示方式，如在小屏幕上切换为横排；3) 使用 transform 旋转时,确保容器有足够的空间容纳旋转后的文字。
问题2：如何实现中英文混排的竖排效果？
解答：实现中英文混排竖排需要结合 writing-mode 和 text-orientation 属性，具体方法为：设置父元素 writing-mode: vertical-rl;，子元素中英文部分添加 text-orientation: upright; 属性，这样中文会正常竖排，英文字母也会垂直显示而不是横躺，如果需要英文横躺显示，则不需要设置 text-orientation 属性，英文字母会自动跟随 writing-mode 的方向排列。
