p { margin: 0; padding: 0; font-size: 16px; } .vertical-text { display: inline-block; /* 将容器转为块级元素 */ margin-right: 0.5em; /* 添加一些间距 */ transform: rotate(90deg); /* 将容器旋转 90 度 */ } .vertical-text span { display: block; /* 将每个字符转为块级元素 */ transform: rotate(-90deg); /* 将每个字符逆时针旋转 90 度 */ }在上面的代码中,我们首先定义了一个 p 元素的基本样式。接着,我们为竖排文本定义了一个名为 vertical-text 的类,它用于添加容器的样式。在这个类中,我们将容器转换为块级元素,并对容器进行了旋转。最后,我们还定义了一个 vertical-text span 选择器,用于对每个字符的样式进行设置。 使用时,我们只需要给想要竖排的文本添加 vertical-text 类,并将文本放在容器中即可:
运行上面的代码,你就可以看到竖排的文本了!我 的 中 文 太 棒 了