CSS实现文本垂直排版：在响应式布局中将文字从底部向上显示-html教程-PHP中文网

CSS实现文本垂直排版：在响应式布局中将文字从底部向上显示

心靈之曲

发布： 2025-11-27 11:31:52

原创

697人浏览过

css实现文本垂直排版：在响应式布局中将文字从底部向上显示

本教程详细探讨了在响应式布局中，如何利用CSS将文本从底部到顶部垂直显示。文章介绍了两种核心方法：一是通过transform属性（rotate和translateX）精确旋转和定位文本；二是通过writing-mode结合scale属性实现文本的垂直翻转。两种方案均提供详细代码示例，并分析各自的优缺点及适用场景，旨在帮助开发者灵活应对不同设计需求。

在现代网页设计中，为了适应多样化的布局需求，尤其是在响应式设计中，经常需要将文本以非传统方式（例如垂直方向）进行排版。本文将专注于解决一个具体场景：如何在高度确定的容器内，将文本从底部向上（逆时针旋转90度）显示，同时考虑到容器宽度不固定的响应式特性。我们将探讨两种主流的CSS实现方案。

方法一：利用CSS transform 属性实现精确旋转与定位

transform 属性是CSS中一个功能强大的工具，允许我们对元素进行平移、旋转、缩放和倾斜。要实现文本逆时针旋转90度并从底部向上显示，我们需要结合 rotate 和 translateX。

核心CSS属性解析

transform: rotate(-90deg);: 这会将文本元素逆时针旋转90度。旋转后，文本的“顶部”将指向左侧，而“底部”指向右侧。
transform: translateX(-100%);: 在旋转之后，文本的原始位置会发生偏移，通常会导致文本超出容器顶部。translateX(-100%) 的作用是将元素沿着X轴（此时是旋转后的X轴，即垂直方向）向负方向移动其自身宽度的100%，从而将其拉回容器内部，并使其底部对齐容器的底部。
transform-origin: 0 0;: 这个属性定义了所有 transform 操作的基点。将其设置为 0 0（即元素的左上角）可以确保旋转和平移操作都以元素的左上角为参考点，这在调整位置时通常更为直观和可控。
display: inline-block;: 确保 span 元素能够接受 transform 属性，并能够独立地进行布局和尺寸计算。
white-space: nowrap;: 这是一个重要的辅助属性，用于防止文本在应用旋转之前发生换行，确保文本作为一个整体进行旋转。

示例代码

以下是实现此效果的HTML和CSS代码：

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

HTML 结构:

Typewise.app

面向客户服务和销售团队的AI写作解决方案。

查看详情

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文本垂直排版 - Transform</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .container-a {
            height: 100%;
            font-size: 40px;
            background-color: #cccccc;
            display: inline-block; /* 允许div根据内容调整宽度，或根据需要设置固定宽度 */
            padding: 20px; /* 示例内边距 */
            box-sizing: border-box; /* 确保padding不增加总宽度/高度 */
            vertical-align: top; /* 防止inline-block元素底部对齐 */
        }
        .rotated-transform {
            transform: rotate(-90deg) translateX(-100%);
            transform-origin: 0 0;
            display: inline-block;
            /* max-width: 100vh; /* 根据实际需求调整，防止旋转后的文本溢出 */
            white-space: nowrap; /* 防止文本在旋转前换行 */
        }
    </style>
</head>
<body>
    <div class="container-a">
        <span class="rotated-transform">
            HELLO WORLD! THIS IS SOME LONG TEXT TO DEMONSTRATE ROTATION.
        </span>
    </div>
</body>
</html>

登录后复制

CSS 样式:

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.container-a {
  height: 100%;
  font-size: 40px;
  background-color: #cccccc;
  display: inline-block;
  padding: 20px;
  box-sizing: border-box;
  vertical-align: top;
}
.rotated-transform {
    transform: rotate(-90deg) translateX(-100%);
    transform-origin: 0 0;
    display: inline-block;
    /* max-width: 100vh; /* 根据实际需求调整 */
    white-space: nowrap; /* 确保文本不换行 */
}

登录后复制

注意事项

溢出处理： 使用 transform 旋转元素时，其占据的原始空间不会改变，这可能导致与周围元素重叠或布局混乱。需要额外通过 margin、padding 或调整父容器的尺寸来避免溢出。
文本选择： 文本选择行为通常保持正常。
兼容性： transform 属性在现代浏览器中支持良好，但对于旧版浏览器可能需要添加厂商前缀。

方法二：结合 writing-mode 与 scale 实现垂直翻转

writing-mode 属性是CSS3中专门用于控制文本书写方向的属性，它能更自然地处理垂直文本布局。然而，writing-mode 默认是从上到下或从右到左书写。为了实现从底部到顶部，我们可以结合 scale 属性进行翻转。

核心CSS属性解析

writing-mode: vertical-rl;: 这个属性会将文本的书写模式设置为垂直方向，并且从右到左（即第一列从上到下，第二列在其左侧从上到下）。对于单行文本，它会使文本从上到下垂直排列。
scale: -1;: 这是一个简写属性，等同于 transform: scale(-1, -1);。它会使元素在水平和垂直方向上都进行翻转。当与 vertical-rl 结合时，它能巧妙地将原本从上到下的文本翻转为从底部到顶部显示。
white-space: nowrap;: 同样用于防止文本在应用垂直书写模式前换行。

示例代码

以下是使用 writing-mode 和 scale 实现相同效果的HTML和CSS代码：

HTML 结构:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文本垂直排版 - Writing Mode</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .container-a {
            height: 100%;
            font-size: 40px;
            background-color: #cccccc;
            display: inline-block;
            padding: 20px;
            box-sizing: border-box;
            vertical-align: top;
        }
        .rotated-writing-mode {
            writing-mode: vertical-rl; /* 文本从上到下，从右到左 */
            scale: -1; /* 垂直和水平翻转，实现从底部到顶部 */
            white-space: nowrap; /* 确保文本不换行 */
        }
    </style>
</head>
<body>
    <div class="container-a">
        <span class="rotated-writing-mode">
            HELLO WORLD! THIS IS SOME LONG TEXT TO DEMONSTRATE WRITING MODE.
        </span>

登录后复制

以上就是CSS实现文本垂直排版：在响应式布局中将文字从底部向上显示的详细内容，更多请关注php中文网其它相关文章！