在DIV中实现文本侧向显示的CSS技巧-html教程-PHP中文网

在DIV中实现文本侧向显示的CSS技巧

碧海醫心

发布： 2025-11-24 12:51:10

原创

437人浏览过

在div中实现文本侧向显示的css技巧

本教程详细介绍了在响应式布局中，如何利用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。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <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>
</head>
<body>
    <div class="a">
        <span class="rotated-transform">
            你好，世界！这是一段旋转的文本。
        </span>
    </div>
    <div class="a" style="background-color: #dddddd; flex-grow: 1;">
        <!-- 另一个div，模拟响应式布局 -->
        正常文本内容
    </div>
</body>
</html>

登录后复制

注意事项：

溢出处理: 使用 transform 进行旋转时，元素的几何尺寸并没有改变，只是视觉上发生了变化。这使得文本溢出容器的情况比较难以控制。通常需要结合 overflow: hidden; 和调整 position、left/bottom 属性来精确定位和裁剪。
文本流: 旋转后的文本脱离了正常的文档流，可能会影响周围元素的布局。需要通过绝对定位等方式来将其放置在特定位置。
可访问性: 纯粹的 transform 旋转不会改变文本的阅读顺序，但视觉上的改变可能对屏幕阅读器用户造成困扰。
响应式: 在响应式布局中，如果容器宽度不确定，需要仔细计算旋转后文本的定位和尺寸，可能需要JavaScript辅助或更复杂的CSS技巧。

方法二：结合 writing-mode 与 scale 实现垂直书写

CSS writing-mode 属性是专门为控制文本书写方向而设计的，它更符合自然语言的排版习惯。结合 scale 属性，我们可以实现从下到上的垂直文本效果。

AI帮个忙

多功能AI小工具，帮你快速生成周报、日报、邮、简历等

116

查看详情

核心原理：

立即学习“前端免费学习笔记（深入）”；

writing-mode: vertical-rl;: 这个属性会将文本的书写模式设置为垂直方向，并且文字流向是从右到左（即列从右边开始，每列从上到下）。这会使文本垂直排列，但默认是从上到下。
scale: -1; (或 transform: scale(-1);): 为了将“从上到下”的垂直文本变为“从下到上”，我们可以对其进行整体翻转。scale(-1) 会同时在X轴和Y轴上进行翻转，从而达到我们想要的效果。

示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <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>
</head>
<body>
    <div class="a">
        <span class="rotated-writing-mode">
            你好，世界！这是一段垂直书写的文本。
        </span>
    </div>
    <div class="a" style="background-color: #dddddd; flex-grow: 1;">
        正常文本内容
    </div>
</body>
</html>

登录后复制

注意事项：

文本选择问题: 使用 scale(-1) 进行翻转会导致文本选择方向反转，即从视觉上看，您可能需要从右向左或从下向上拖动鼠标才能正确选择文本。这可能会影响用户体验。
自然文本流: writing-mode 属性会改变文本的块级和行级布局行为，使其更自然地适应垂直排版。这通常比 transform 更容易处理溢出和响应式布局。
浏览器兼容性: 现代浏览器对 writing-mode 的支持良好，但仍需注意兼容性问题，尤其是在旧版浏览器中。
方向控制: writing-mode 提供了多种值（如 vertical-lr, horizontal-tb 等）来控制文本流向，可以根据具体需求选择。

总结与选择建议

在实现DIV中文本的侧向或垂直显示时，选择哪种方法取决于您的具体需求：

transform 方案:
- 优点: 提供更精细的旋转角度控制（不限于90度），适用于需要任意角度旋转的场景。
- 缺点: 文本流管理复杂，容易出现溢出问题，需要额外调整定位，且对文本选择无影响。
writing-mode + scale 方案:
- 优点: 更符合语义的垂直文本排版方式，在处理文本流和溢出方面通常更简单。
- 缺点: scale(-1) 会导致文本选择体验不佳，且只能实现固定的从下到上垂直效果（或通过其他 writing-mode 值实现其他方向）。