CSS 纵向文本

CSS 纵向文本是一种用于控制文本在垂直方向显示的样式。通过使用 writing-mode 和 text-orientation 属性，我们可以改变文本的方向和方向。

writing-mode 属性

writing-mode 属性用于定义文本的书写模式。它可以接受以下值：

• horizontal-tb：默认值，文本从左到右水平显示。
• vertical-rl：文本从上到下垂直显示，从右到左书写。
• vertical-lr：文本从上到下垂直显示，从左到右书写。

示例：

.vertical-text {
  writing-mode: vertical-rl;
}

text-orientation 属性

text-orientation 属性用于指定文本的方向。它可以接受以下值：

• mixed：默认值，根据文字内容自动调整方向。
• upright：文字垂直正立显示。

示例：

.vertical-text {
  text-orientation: upright;
}

示例代码

以下是一个使用以上属性创建纵向文本的示例：

<style>
.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
}
</style>

<p class="vertical-text">这是一个纵向文本。</p>

以上代码将创建一个纵向显示的文本块。

请注意，该效果在某些浏览器上可能不被支持，特别是一些旧版本的浏览器。在使用纵向文本之前，请确保目标浏览器支持相应的 CSS 属性。

更多关于 CSS 纵向文本的信息，你可以参考 MDN 文档。