当前位置：首页 > 前端开发 > 正文

html如何使文字垂直

admin
前端开发
2025-07-18
8

HTML中，可以使用CSS的`writing-mode: vertical-rl;

HTML如何使文字垂直

在HTML中,使文字垂直显示有多种方法，每种方法都有其适用场景和优缺点，以下是几种常见的实现方式：

使用CSS的writing-mode属性

CSS的writing-mode属性可以改变文本的书写模式，从而实现文字的垂直排列，可以使用vertical-rl或vertical-lr值来设置文本从右到左或从左到右垂直书写。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8">垂直文字示例</title> <style> .vertical-text { writing-mode: vertical-rl; / 从右到左垂直书写 / text-orientation: upright; / 确保字符方向正确 / } </style> </head> <body> <div class="vertical-text"> 这是一个垂直显示的文本示例。 </div> </body> </html>

说明：

writing-mode: vertical-rl; 将文本设置为从右到左垂直排列。
text-orientation: upright; 确保每个字符保持直立，不会被旋转。

使用CSS的transform属性

通过CSS的transform属性，可以将文本旋转90度，实现垂直显示，这种方法适用于需要将水平文本转换为垂直文本的场景。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8">旋转文字示例</title> <style> .rotated-text { transform: rotate(90deg); / 调整位置以适应旋转 / position: absolute; top: -100px; / 根据需要调整 / left: 50px; / 根据需要调整 / } </style> </head> <body> <div class="rotated-text"> 这是一个旋转90度的文本。 </div> </body> </html>

说明：

html如何使文字垂直第1张

transform: rotate(90deg); 将文本旋转90度。
使用position: absolute;和top、left属性调整文本的位置，使其在页面上正确显示。

使用表格（Table）布局

通过HTML表格,可以将每个字符放入一个单元格中，然后调整表格的方向，实现文字的垂直显示，这种方法适用于需要精确控制每个字符位置的场景。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8">表格垂直文字示例</title> <style> table.vertical-text { border-collapse: collapse; } table.vertical-text td { padding: 0; line-height: 1; } </style> </head> <body> <table class="vertical-text"> <tr><td>这</td></tr> <tr><td>是</td></tr> <tr><td>一</td></tr> <tr><td>个</td></tr> <tr><td>垂</td></tr> <tr><td>直</td></tr> <tr><td>文</td></tr> <tr><td>本</td></tr> </table> </body> </html>

说明：

每个字符放在一个<td>单元格中。
通过调整表格的样式,如border-collapse: collapse;，去除单元格之间的间隙，使文字紧密排列。

使用Flexbox布局

利用CSS的Flexbox布局,可以将文本内容垂直排列，这种方法适用于需要在容器内垂直对齐文本的场景。

html如何使文字垂直第2张

说明：

display: flex; 将容器设为Flex容器。
flex-direction: column; 将子元素垂直排列。
通过align-items和justify-content属性调整对齐方式。

使用JavaScript动态处理

对于需要动态生成垂直文字的场景,可以使用JavaScript将文本拆分为单个字符，然后逐个添加到页面中。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8">JavaScript垂直文字示例</title> <style> .vertical-text { display: inline-block; font-size: 24px; } </style> </head> <body> <div id="vertical-container"></div> <script> const text = "这是一个垂直显示的文本。"; const container = document.getElementById('vertical-container'); // 将文本拆分为单个字符并逐个添加到容器中 for (let char of text) { const span = document.createElement('span'); span.textContent = char; span.classList.add('vertical-text'); container.appendChild(span); // 添加换行符以实现垂直排列 container.appendChild(document.createElement('br')); } </script> </body> </html>

说明：