上一篇
HTML文字如何竖直排列？CSS实现文字垂直布局
在 HTML 和 CSS 开发中，实现文字竖直分布（垂直排列）通常有几种不同的场景：是让单个单词的字母垂直堆叠，还是让一行文字整体旋转 90 度，亦或是让多个独立的文字块垂直排列,以下将详细解析这三种常见场景的实现方法。
单个单词字母垂直堆叠
如果你希望一个单词（如 “HTML”）中的每个字母从上到下依次排列，最现代且推荐的方法是使用 CSS 的 writing-mode 属性。
核心属性：
- writing-mode: vertical-rl;：文字从上到下书写，行从右向左推进（中文传统排版方式）。
- writing-mode: vertical-lr;：文字从上到下书写,行从左向右推进。
代码示例：
注意： 这种方法适用于将一段连续的文本流转换为垂直流，如果希望每个字符独立控制，可能需要使用 <span> 包裹每个字符并分别设置样式，但通常 writing-mode 足以满足大多数需求。
整行文字旋转 90 度
如果你希望保持文字水平阅读方向，但将整个文本块旋转 90 度，使其看起来是“竖直”的，可以使用 transform 属性。
核心属性：
- transform: rotate(90deg);：顺时针旋转 90 度。
- transform: rotate(-90deg);：逆时针旋转 90 度。
代码示例：
<!DOCTYPE html> <html> <head> <style> .rotated-text { / 旋转文字 / transform: rotate(90deg); / 可选：调整原点，使旋转中心更合理 / transform-origin: left top; / 由于旋转后元素占据的空间可能影响布局，可能需要调整 margin 或 padding / display: inline-block; font-size: 24px; } </style> </head> <body> <div class="rotated-text">这是一行旋转的文字</div> </body> </html>
适用场景： 这种效果常用于侧边栏标题、标签或装饰性文本，需要注意的是，旋转后的元素在文档流中仍占据其原始水平方向的宽度，可能需要额外的布局调整（如 Flexbox 或 Grid）来避免与其他元素重叠。
多个独立文字块垂直排列
如果你指的是将多个独立的 <div> 或 <span> 元素垂直排列（即从上到下堆叠），这属于常规的块级布局问题，通常使用 Flexbox 或 Grid 实现。
核心方法：
- Flexbox： 设置 flex-direction: column;
- Grid： 设置 grid-template-columns: 1fr; 或使用默认的块级行为。
代码示例（使用 Flexbox）：
<!DOCTYPE html> <html> <head> <style> .vertical-container { display: flex; flex-direction: column; / 关键：主轴方向为垂直 / align-items: center; / 可选：水平居中 / gap: 10px; / 可选：元素之间的间距 / } .item { font-size: 20px; padding: 5px 10px; background-color: #f0f0f0; } </style> </head> <body> <div class="vertical-container"> <div class="item">第一行</div> <div class="item">第二行</div> <div class="item">第三行</div> </div> </body> </html>
| 方法 | 适用场景 | 优点 | 缺点 |
|---|---|---|---|
| writing-mode: vertical-rl | 单个单词或短语的字母垂直堆叠 | 语义化好，布局自然，无需额外计算旋转角度 | 仅适用于连续文本流，对复杂排版支持有限 |
| transform: rotate() | 整行文字旋转 90 度 | 实现简单，视觉效果直观 | 可能影响文档流布局，需要额外调整位置 |
| flex-direction: column | 多个独立元素垂直排列 | 布局灵活，易于控制间距和对齐 | 不适用于单个单词内部字母的垂直排列 |
相关问题与解答
问题 1：为什么使用 writing-mode: vertical-rl 后，文字的方向不符合预期？
解答：
writing-mode 不仅影响文字的排列方向，还影响文本流的阅读顺序。vertical-rl 表示文字从上到下书写，行从右向左推进（类似中文古籍排版），如果你希望行从左向右推进（即第一行在左侧，第二行在右侧），应使用 vertical-lr，确保父容器有足够的宽度来容纳垂直排列的文字,否则可能会发生截断或换行异常。
问题 2：在旋转文字（transform: rotate(90deg)）后，如何正确调整其位置以避免与其他元素重叠？
解答：
旋转后的元素在文档流中仍占据其原始水平方向的宽度和高度，但其视觉位置已改变，为避免重叠,可以采取以下措施：
- 使用 Flexbox 或 Grid 布局： 将旋转元素放入一个容器中，通过容器的对齐属性（如 align-items 或 justify-content）来调整其位置。
- 调整 transform-origin： 改变旋转的中心点，例如设置为 left top 或 center center,可以使旋转后的元素更易于定位。
- 手动调整 margin 或 position： 如果旋转元素是绝对定位的，可以使用 top、left 等属性精确控制其位置，设置 position: absolute; top: 0; left: 0; 并将其父元素设置为 position: relative;。
