在HTML中，文字默认是水平排列的，如果你想让文字竖排显示，可以使用CSS样式来实现，以下是一些常用的方法：
1、使用writing-mode属性
writing-mode属性用于定义文本的水平或垂直排列方式，你可以通过设置writing-mode属性为vertical-rl（从右到左垂直排列）或vertical-lr（从左到右垂直排列）来使文字竖排显示。
示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.vertical {
writing-mode: vertical-rl;
}
</style>
</head>
<body>
<p class="vertical">这是一段竖排的文字。</p>
</body>
</html>
2、使用transform属性和rotate函数
你还可以使用CSS的transform属性和rotate函数来使文字竖排显示，将文字旋转90度，然后将其转换为块级元素，并设置适当的宽度和高度。
示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.vertical {
writing-mode: horizontal-tb;
transform: rotate(90deg);
display: inline-block;
width: 1em;
height: 1em;
}
</style>
</head>
<body>
<p class="vertical">这是一段竖排的文字。</p>
</body>
</html>
3、使用SVG元素
另一种方法是使用SVG元素来创建竖排文字，SVG允许你创建可缩放的矢量图形，包括文本，你可以创建一个SVG容器，然后在其中添加一个文本元素，并设置其text-orientation属性为upright（默认值）或sideways。
示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.svg-container {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="svg-container">
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
<text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" font-size="24" text-orientation="sideways">这是一段竖排的文字。</text>
</svg>
</div>
</body>
</html>
以上是三种常用的方法来实现HTML中文字的竖排显示，你可以根据需要选择合适的方法来实现你的需求。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/331435.html
微信扫一扫 