本教程详细探讨了在响应式布局中，如何利用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 结构:
<!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> 
