本教程详细介绍了如何在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 会导致文本选择行为异常，不适合需要用户频繁交互或复制文本的场景。
- 适用场景: 主要用于纯粹的视觉展示，文本内容不常被选择或复制，且对布局的流式特性有较高要求时。
在选择哪种方法时，请根据您的具体需求权衡其优缺点。如果文本交互性不强，且希望布局更自然，writing-mode 结合 scale 是一个不错的选择。如果需要极致的精确控制，且能接受手动调整溢出，那么 transform 提供了更大的灵活性。
