在现代网页设计中，设置文字竖直方向的代码是一项常见的需求，尤其是在需要展示一些特殊的文本布局或艺术效果时。为了实现这一功能，CSS******了多种方法来调整文本的方向。******将详细介绍如何使用CSS代码来设置文字竖直方向。

### 1. 使用 `writing-mode` 属性

`writing-mode` 属性用于定义文本的书写方向，包括从左到右、从右到左、从上到下和从下到上。通过结合 `vertical-rl` 或 `vertical-lr` 值，可以实现竖直方向的文字显示。

```css

.vertical-text {

writing-mode: vertical-rl;

}

```

### 2. 使用 `transform` 属性

除了直接使用 `writing-mode` 属性外，还可以通过 `transform` 属性配合旋转来实现类似的效果。这种方法适用于需要更复杂布局调整的情况。

```css

.vertical-text {

transform: rotate(180deg);

writing-mode: tb-rl;

}

```

### 3. 结合 `display: inline-block`

为了确保竖直方向的文字能够正确对齐，并且不影响其他元素的布局，可以将文本内容包装在一个 `div` 或其他块级元素中，并设置其为 `display: inline-block`。

```css

.vertical-text {

display: inline-block;

writing-mode: vertical-rl;

}

```

### 4. 实际应用示例

******是一个完整的HTML和CSS示例，展示如何使用上述方法来设置文字的竖直方向：

```html

这是水平显示的文字。

这是竖直显示的文字。

```

以上代码展示了如何通过CSS实现文字的竖直显示，并结合了多种方法以满足不同的设计需求。在实际项目中，可以根据具体需求选择合适的方法来应用。