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 结构:

Shakespeare

一款人工智能文案软件，能够创建几乎任何类型的文案。

下载

    
    
    
    


    

        
            HELLO WORLD! THIS IS SOME LONG TEXT TO DEMONSTRATE ROTATION.
        
    

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 结构:

    
    
    
    


    

        
            HELLO WORLD! THIS IS SOME LONG TEXT TO DEMONSTRATE WRITING MODE.