当前位置：首页 > 文章列表 > 文章 > 前端 > CSS文字垂直排版与旋转教程

CSS文字垂直排版与旋转教程

2025-12-02 11:03:33 0浏览收藏

哈喽！今天心血来潮给大家带来了《CSS实现文字垂直排版与90度旋转教程》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

CSS实现Div内文字垂直排版与90度逆时针旋转指南

本教程详细介绍了如何在HTML的div容器内实现文字从底部到顶部（90度逆时针）的垂直排版。文章深入探讨了两种主要的CSS实现方案：一是利用transform属性进行精确的旋转和位移，二是结合writing-mode属性与scale变换来改变文字书写方向并翻转。每种方法都配有代码示例，并分析了其优缺点及适用场景，旨在帮助开发者根据具体需求选择最合适的解决方案。

在网页设计中，有时需要将文字以非传统的方向显示，例如在侧边栏或特殊布局中，将文本从底部向上垂直排列。这不仅能节省空间，还能为设计增添独特的视觉效果。本文将介绍两种主流的CSS技术，帮助您轻松实现这一目标。

方法一：使用 CSS transform 属性进行精确控制

transform 属性是CSS中用于对元素进行2D或3D转换的强大工具。通过结合 rotate 和 translateX，我们可以精确地控制文本的旋转角度和位置。

实现原理

旋转 (rotate(-90deg)): rotate(-90deg) 会将元素逆时针旋转90度。
位移 (translateX(-100%)): 元素旋转后，其原始的顶部会变成新的左侧，并且可能会超出其容器。translateX(-100%) 会将元素沿其自身X轴（旋转后的X轴，即垂直方向）向负方向移动其自身宽度的100%，从而将其拉回到容器内部。
变换原点 (transform-origin: 0 0;): 默认情况下，变换的原点是元素的中心。将其设置为 0 0 (左上角) 可以确保旋转和位移从元素的左上角开始计算，这有助于更精确地控制最终位置。
显示模式 (display: inline-block;): 确保元素能够接受 transform 属性并正确布局。
最大宽度 (max-width: 100vh;): 在某些响应式布局中，如果容器宽度不确定，设置 max-width 为视口高度 (100vh) 可以帮助限制旋转后文本的宽度，防止溢出。

示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transform实现垂直文本</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            display: flex; /* 方便演示容器高度 */
        }
        .container {
            height: 100%;
            font-size: 40px;
            background-color: #cccccc;
            display: inline-block; /* 保持原始inline-block特性 */
            padding: 20px; /* 增加一些内边距 */
            box-sizing: border-box;
        }
        .rotated-text-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">
        <span class="rotated-text-transform">
            HELLO WORLD! 这是一段垂直显示的文本。
        </span>
    </div>
</body>
</html>

注意事项

溢出处理: 使用 transform 旋转的元素在布局上仍然占据其原始的未旋转空间。这意味着，如果文本内容过长，或者容器的尺寸与旋转后的文本不匹配，可能会出现布局溢出。虽然 translateX(-100%) 和 max-width: 100vh 有助于缓解，但在复杂的响应式布局中仍需仔细调整。
文本选择: 旋转后的文本选择行为通常是正常的。

方法二：结合 writing-mode 与 scale 实现

writing-mode 属性是CSS3中专门用于控制文本书写方向的属性，它能更好地处理垂直文本的布局和流式排版。结合 scale 变换，我们可以实现从底部到顶部的显示效果。

实现原理

书写模式 (writing-mode: vertical-rl;): 这个属性会将文本设置为垂直书写模式，并且文本流从上到下，列从右到左排列。这意味着文本会从容器的顶部开始向下书写。
翻转 (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>Writing Mode实现垂直文本</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            display: flex;
        }
        .container {
            height: 100%;
            font-size: 40px;
            background-color: #cccccc;
            display: inline-block;
            padding: 20px;
            box-sizing: border-box;
        }
        .rotated-text-writing-mode {
            writing-mode: vertical-rl; /* 垂直书写，从右到左的列 */
            scale: -1; /* 翻转元素，使其从底部向上显示 */
            /* 注意：这里的scale -1 可能会影响文本选择，但对于纯展示效果良好 */
            white-space: nowrap; /* 防止文本换行 */
        }
    </style>
</head>
<body>
    <div class="container">
        <span class="rotated-text-writing-mode">
            HELLO WORLD! 这是一段垂直显示的文本。
        </span>
    </div>
</body>
</html>

注意事项

文本选择行为: 使用 scale: -1 翻转后，文本的视觉显示方向与实际的DOM结构方向是相反的。这可能导致用户在尝试选择文本时，选择区域与鼠标移动方向不一致，造成用户体验上的困扰。
布局优势: writing-mode 属性在处理垂直文本的流式布局方面表现更佳，它会根据容器的可用空间自动调整文本流，通常比 transform 更少出现溢出问题。
浏览器兼容性: writing-mode 属性的现代浏览器支持良好，但对于旧版浏览器可能需要添加前缀。scale 属性也得到了广泛支持。

总结与选择建议

两种方法都能实现将文本从底部到顶部垂直显示的效果，但它们各有侧重和适用场景：

transform 方法:
- 优点: 对文本旋转和位置控制非常精确，适用于需要精细调整布局的场景。
- 缺点: 布局上下文仍按原始方向计算，处理溢出相对复杂；需要手动计算位移来修正位置。
- 适用场景: 当你需要对单个或少量文本进行精确的视觉旋转，且对布局溢出有良好控制时。
writing-mode + scale 方法:
- 优点: writing-mode 更符合语义化，能更好地处理垂直文本的流式布局和自动换行（如果 white-space 未设置为 nowrap），对溢出处理更友好。
- 缺点: scale: -1 会导致文本选择行为异常，不适合需要用户频繁交互或复制文本的场景。
- 适用场景: 主要用于纯粹的视觉展示，文本内容不常被选择或复制，且对布局的流式特性有较高要求时。