在HTML中，要实现文字竖排，通常需要使用CSS（层叠样式表）来控制，CSS提供了多种方法来实现文字的竖排显示，以下是几种常用的方法，以及如何在你的网页中应用它们。
1、使用 writing-mode 属性
writing-mode 属性是CSS3中新增的一个属性，用于定义文本的排列方向，你可以使用这个属性来实现文字的竖排，以下是一个简单的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字竖排示例</title>
<style>
竖排容器 {
writing-mode: vertical-rl; /* 从右向左的竖排 */
direction: rtl; /* 从右向左的文本方向 */
text-orientation: upright; /* 保持字符的垂直方向 */
}
</style>
</head>
<body>
<div class="竖排容器">
这段文字将会竖排显示。
</div>
</body>
</html>
在这个示例中，竖排容器 类的元素内的文本将会从右向左竖排显示。writing-mode 的值 vertical-rl 表示文本的排列方向是从右向左。direction 属性设置为 rtl（right-to-left），表示文本方向是从右向左。text-orientation 属性设置为 upright，确保字符保持垂直方向。
2、使用 transform 属性
CSS的 transform 属性也可以实现文字的竖排，这种方法是通过旋转文本来实现的，以下是一个示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字竖排示例</title>
<style>
竖排文字 {
writing-mode: horizontal-tb; /* 水平排列 */
-webkit-transform: rotate(-90deg); /* 逆时针旋转90度 */
transform: rotate(-90deg);
white-space: nowrap; /* 禁止文本换行 */
}
</style>
</head>
<body>
<div class="竖排文字">
这段文字将会竖排显示。
</div>
</body>
</html>
在这个示例中，竖排文字 类的元素内的文本将会水平排列，然后通过 transform 属性逆时针旋转90度，从而实现竖排效果。white-space 属性设置为 nowrap，以防止文本在旋转后换行。
3、使用 display: flex; 和 flex-direction 属性
你还可以通过使用Flexbox布局来实现文字的竖排，以下是一个示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字竖排示例</title>
<style>
竖排容器 {
display: flex;
flex-direction: column; /* 设置子元素垂直排列 */
writing-mode: horizontal-tb; /* 水平排列 */
}
竖排文字 {
writing-mode: vertical-rl; /* 从右向左的竖排 */
direction: rtl; /* 从右向左的文本方向 */
text-orientation: upright; /* 保持字符的垂直方向 */
}
</style>
</head>
<body>
<div class="竖排容器">
<div class="竖排文字">
这段文字将会竖排显示。
</div>
</div>
</body>
</html>
在这个示例中，竖排容器 类的元素使用了Flexbox布局，并通过 flex-direction 属性设置子元素垂直排列。竖排文字 类的元素内部文本将竖排显示，使用了之前提到的方法。
以上就是在HTML中实现文字竖排的几种方法，你可以根据自己的需求选择合适的方法，并将其应用到你的网页设计中。