如何在 DIV 中实现文本侧向显示的 CSS 技巧：从基础到实战的完整攻略-猿码集

1. 基础原理与术语

文本侧向显示的核心概念

文本侧向显示在网页设计中通常通过 CSS 的 writing-mode、text-orientation 等属性来实现，其中 DIV 作为容器承载文本内容，是实现该效果的常用载体。

在理解实现前，需要明确两个要点：一个是文本的排列方向（水平、竖直、从右向左等），另一个是文本内部的排列方式（字符的朝向、行列换行等）。这两点共同决定了最终的视觉呈现与可读性。DIV 容器的尺寸与文本方向的匹配度直接影响到排版效果。

实现文本侧向显示的基本属性

最常用的属性是 writing-mode，它决定了文本的主轴方向，例如水平书写还是竖直书写。另一个关键属性是 text-orientation，用于控制竖向文本的字符朝向与排列方式。通过组合这两个属性，几乎可以覆盖主流的文本侧向显示需求。

在实际项目中，应该优先考虑浏览器兼容性与无障碍性：确保屏幕阅读器仍能读取文本，且在移动端也能保持可识别性。这些要求将直接影响你选择的实现策略和后续的样式调整。

/* 基础示例：竖直文本从右向左排列，混合字符方向 */
.demo-vertical {writing-mode: vertical-rl;     /* 竖排，文字从上到下，行从右到左 */text-orientation: mixed;       /* 保留字符方向，适合中英文混排 *//* 可选的回退，兼容老浏览器 */-webkit-writing-mode: vertical-rl;-ms-writing-mode: vertical-rl;
}

关键点：选择合适的 writing-mode 值能快速切换文本方向，text-orientation 影响竖排文本的字符呈现方式，兼容性与可读性需要同时考量。

2. 常用 CSS 属性与实现方式

writing-mode 的用法

通过 writing-mode，你可以在一个 DIV 中实现水平、竖直甚至从不同方向进入的文本布局，这对创建标签、竖排标题、古风排版等场景非常有用。正确选择值，可以避免不必要的额外盒模型变形。

在实现时，推荐先用纯 CSS 的方式完成方向控制，再在必要处增加额外的对齐与边距调整，以保持文本的可读性与美观。

/* 水平文本示例（默认） */
.demo-horizontal { writing-mode: horizontal-tb; }/* 从右向左的竖排文本 */
.demo-vertical-rl { writing-mode: vertical-rl; }/* 从左向右的竖排文本（某些 UI 需求） */
.demo-vertical-lr { writing-mode: vertical-lr; }

实践要点：选择目标方向前，先在设计稿中确认阅读顺序，避免造成用户混乱；另外，混合方向的文本（如中英混排）应结合 text-orientation 进行处理。

text-orientation 的常见取值

text-orientation 决定竖排文本中字符的呈现方式，常用取值包括 mixed、upright、sideways 等。其中 upright 可以让英文字符保持直立，不被旋转，提升可读性。

在对中文、日文等多字形文本进行竖排时，通常使用 mixed，以便中英文、数字等混排时保持协调。

/* 竖排文本搭配 upright 以提升英文可读性 */
.demo-vertical-upright { writing-mode: vertical-rl;text-orientation: upright;
}

兼容性提示：早期浏览器对 writing-mode 的支持不一，需要回退方案；在渐进增强的策略中，先实现简化版本，再逐步扩展到完整效果。

3. 在 DIV 中应用的实战技巧

响应式与跨浏览器兼容性

在实际项目中，文本侧向显示需要随屏幕尺寸变化保持美观，这就要求你在

DIV 容器尺寸与排版单位 上进行灵活设计，配合媒体查询实现响应式调整，确保在不同设备上文本方向仍然清晰。

/* 响应式竖排文本示例 */
.demo-responsive {writing-mode: vertical-rl;text-orientation: mixed;padding: 0.5rem;
}
@media (max-width: 600px) {.demo-responsive {writing-mode: horizontal-tb; /* 小屏返回水平排版以提高可读性 */}
}

跨浏览器兼容性方面，除了主流浏览器，老版本浏览器可能需要前缀属性（如 -webkit-writing-mode 等）或回退方案。实践中，最好将前缀版本与标准版本并行书写，并使用 CSS 变量或混合类名方便维护。

关于可访问性，尽量避免在没有必要时强制竖排文本，因为盲人/低视力用户的阅读体验受影响。若必须竖排，请提供清晰的文本替代与键盘导航支持。可访问性是生产级实现的底线。

结合 transform 的另类实现

除了 writing-mode，你还可以通过 transform 的旋转来实现类似效果，尤其在对特定 UI 元件如按钮标签、图标说明文字时有用。

注意，使用 transform 旋转后的文本在布局流中的占位和对齐会变得复杂，需要额外的容器来保持对齐规则。

/* 通过旋转实现横向“侧向”显示的示例 */
.demo-rotate {display: inline-block;transform: rotate(-90deg);transform-origin: left top;
}

性能考量：复杂的旋转和竖排文本对浏览器排版的压力较高，尤其在大量文本或高频更新场景中，应避免频繁重绘，必要时使用 GPU 加速和简化 DOM。

4. 项目示例与对比

示例1：竖排文本

下面的示例展示了在 DIV 中实现竖排文本的完整结构，包含必要的可访问性与回退处理。竖排文本常用于标题、标签和装饰性文本。

HTML 结构：

<div class="demo-vertical" aria-label="竖排文本示例">竖排文本示例</div>

CSS 实现：

/* 示例1：竖排文本的完整实现 */
.demo-vertical {writing-mode: vertical-rl;text-orientation: mixed;padding: 8px;border: 1px solid #ccc;
}

效果要点：文本从上到下、从右向左排列，适合竖排标题与竖直装饰文本；保持足够的对比度与留白以提升可读性。

示例2：文本沿斜向显示的组合实现

在某些设计中，竖排文本与横向文本的混合排布更符合视觉需求，此时你可以结合 writing-mode 与 transform，实现斜向显示的文本效果。