本教程详细介绍了在响应式布局中，如何利用CSS实现文本的侧向或垂直显示。我们将探讨两种主要方法：一是运用CSS transform 属性进行精确旋转和定位，适用于自定义角度需求；二是结合 writing-mode 与 scale 属性实现从下到上的垂直书写模式。文章将提供具体的代码示例，并分析每种方法的适用场景、优缺点及潜在的布局问题，旨在帮助开发者灵活应对文本排版挑战。
在现代网页设计中，为了实现独特的视觉效果或适应特定的布局需求（例如在侧边栏、标签页或图表轴上显示文本），我们经常需要将文本进行旋转或垂直排布。本教程将深入探讨两种主流的CSS方法，帮助您在任意尺寸的容器中实现文本的侧向显示。
方法一：使用 CSS transform 实现文本旋转
CSS transform 属性提供了一套强大的功能，允许我们对元素进行旋转、缩放、倾斜或平移。对于将文本从左到右改为从下到上显示的需求，我们可以结合 rotate 和 translateX 来实现。
核心原理：
- rotate(-90deg): 将文本元素逆时针旋转90度。这将使其从水平方向变为垂直方向。
- translateX(-100%): 旋转后，元素的原始左上角会成为新的左下角。为了将文本内容向上移动，使其从容器底部开始显示，我们需要将其沿X轴（旋转后的新X轴，即垂直方向）平移自身宽度的100%。
- transform-origin: 0 0;: 设定变换的基点为元素的左上角。这确保了旋转和平移是基于预期的起点进行的，避免了元素在旋转后位置的意外偏移。
示例代码：
首先，我们定义一个基础的HTML结构和一个父容器，模拟响应式布局中的未知宽度div。
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS文本旋转</title><style>
html, body {
height: 100%;
margin: 0;
padding: 0;
display: flex; /* 为了演示方便，使.a高度填充 */
}
.a {
height: 100%;
font-size: 40px;
background-color: #cccccc;
display: inline-block; /* 保持内容宽度 */
padding: 20px; /* 增加一些内边距 */
box-sizing: border-box;
position: relative; /* 为旋转元素提供定位上下文 */
overflow: hidden; /* 防止旋转内容溢出 */
}
.rotated-transform {
transform: rotate(-90deg) translateX(-100%);
transform-origin: 0 0;
display: inline-block; /* 确保transform生效 */
/* max-width: 100vh; /* 根据需求调整，防止文本过长溢出视口 */
white-space: nowrap; /* 防止文本换行 */
position: absolute; /* 绝对定位，脱离文档流 */
left: 0;
bottom: 0; /* 从底部开始 */
}
</style><div class="a">
<span class="rotated-transform">
你好，世界！这是一段旋转的文本。
</span>
</div>
<div class="a" style="background-color: #dddddd; flex-grow: 1;">
<!-- 另一个div，模拟响应式布局 -->
正常文本内容
</div>
注意事项：
- 溢出处理: 使用 transform 进行旋转时，元素的几何尺寸并没有改变，只是视觉上发生了变化。这使得文本溢出容器的情况比较难以控制。通常需要结合 overflow: hidden; 和调整 position、left/bottom 属性来精确定位和裁剪。
- 文本流: 旋转后的文本脱离了正常的文档流，可能会影响周围元素的布局。需要通过绝对定位等方式来将其放置在特定位置。
- 可访问性: 纯粹的 transform 旋转不会改变文本的阅读顺序，但视觉上的改变可能对屏幕阅读器用户造成困扰。
- 响应式: 在响应式布局中，如果容器宽度不确定，需要仔细计算旋转后文本的定位和尺寸，可能需要JavaScript辅助或更复杂的CSS技巧。
方法二：结合 writing-mode 与 scale 实现垂直书写
CSS writing-mode 属性是专门为控制文本书写方向而设计的，它更符合自然语言的排版习惯。结合 scale 属性，我们可以实现从下到上的垂直文本效果。
核心原理：
- writing-mode: vertical-rl;: 这个属性会将文本的书写模式设置为垂直方向，并且文字流向是从右到左（即列从右边开始，每列从上到下）。这会使文本垂直排列，但默认是从上到下。
- scale: -1; (或 transform: scale(-1);): 为了将“从上到下”的垂直文本变为“从下到上”，我们可以对其进行整体翻转。scale(-1) 会同时在X轴和Y轴上进行翻转，从而达到我们想要的效果。
示例代码：
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS垂直书写模式</title><style>
html, body {
height: 100%;
margin: 0;
padding: 0;
display: flex;
}
.a {
height: 100%;
font-size: 40px;
background-color: #cccccc;
display: inline-block;
padding: 20px;
box-sizing: border-box;
position: relative;
}
.rotated-writing-mode {
writing-mode: vertical-rl; /* 垂直书写，列从右到左 */
scale: -1; /* 水平垂直同时翻转 */
/* transform: scale(-1); 也可以 */
display: inline-block; /* 确保属性生效 */
white-space: nowrap; /* 防止文本换行 */
height: 100%; /* 填充父容器高度 */
text-align: right; /* 根据需求调整对齐方式 */
/* 注意：scale(-1) 会导致文本选择方向反转，但视觉效果符合要求 */
}
</style><div class="a">
<span class="rotated-writing-mode">
你好，世界！这是一段垂直书写的文本。
</span>
</div>
<div class="a" style="background-color: #dddddd; flex-grow: 1;">
正常文本内容
</div>
注意事项：
- 文本选择问题: 使用 scale(-1) 进行翻转会导致文本选择方向反转，即从视觉上看，您可能需要从右向左或从下向上拖动鼠标才能正确选择文本。这可能会影响用户体验。
- 自然文本流: writing-mode 属性会改变文本的块级和行级布局行为，使其更自然地适应垂直排版。这通常比 transform 更容易处理溢出和响应式布局。
- 浏览器兼容性: 现代浏览器对 writing-mode 的支持良好，但仍需注意兼容性问题，尤其是在旧版浏览器中。
- 方向控制: writing-mode 提供了多种值（如 vertical-lr, horizontal-tb 等）来控制文本流向，可以根据具体需求选择。
总结与选择建议
在实现DIV中文本的侧向或垂直显示时，选择哪种方法取决于您的具体需求：
-
transform 方案:
- 优点: 提供更精细的旋转角度控制（不限于90度），适用于需要任意角度旋转的场景。
- 缺点: 文本流管理复杂，容易出现溢出问题，需要额外调整定位，且对文本选择无影响。
-
writing-mode + scale 方案:
- 优点: 更符合语义的垂直文本排版方式，在处理文本流和溢出方面通常更简单。
- 缺点: scale(-1) 会导致文本选择体验不佳，且只能实现固定的从下到上垂直效果（或通过其他 writing-mode 值实现其他方向）。
通用建议：
- 对于需要标准垂直排版（如侧边导航、图表标签）且不介意文本选择体验的场景，推荐使用 writing-mode 方案，因为它更符合文本排版的语义。
- 如果需要自定义旋转角度，或者文本内容较短、不涉及复杂的文本流，transform 方案则更为灵活。
- 无论选择哪种方法，都应在不同浏览器和设备上进行充分测试，确保视觉效果和用户体验符合预期。在响应式布局中，请特别关注文本在不同容器宽度和高度下的表现。
通过理解和掌握这两种CSS技巧，您将能够更灵活地控制网页中的文本排版，创造出更具吸引力和功能性的设计。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
