通过CSS显示垂直文本以垂直方式显示文本元素-前端开发

实现垂直显示文本的方式主要有两种：一种是利用CSS3的transform属性进行操作，另一种是利用writing-mode属性。

实现垂直显示文本的方式主要有两种：一种是利用CSS3的transform属性进行操作，另一种是利用writing-mode属性。

通过transform属性

transform属性是CSS3中的属性，用于对元素进行变形，包括旋转、倾斜、缩放、位移等。我们可以利用它来旋转文本元素以实现垂直显示的效果。

首先，我们需要将文本元素的display属性设置为inline-block，否则无法旋转。

.vertical-text {
  display: inline-block;
  transform: rotate(-90deg);
  transform-origin: top left;
}

以上代码将文本元素旋转了-90度，也就是逆时针旋转了90度，因此文字将会从右向左垂直于元素显示。transform-origin属性用于指定旋转时参考的点，默认为元素中心点，但在本例中我们需要将它设置为元素左上角以使得元素按照从上到下的顺序进行排列。

我们可以结合CSS布局进行更完整的展示。比如将旋转后的文本元素放在一个父元素中，并将该父元素的宽度和高度调整为文本元素的高度和宽度。

<div class="vertical-wrapper">
  <div class="vertical-text">垂直显示文本</div>
</div>

.vertical-wrapper {
  width: 20px;
  height: 100px;
  margin: 20px auto;
  border: 1px solid #999;
}

.vertical-text {
  display: inline-block;
  transform: rotate(-90deg);
  transform-origin: top left;
  white-space: nowrap;
}

上面的代码实现了一个垂直显示文本的效果。具体说明如下：

创建一个包含文本元素的父元素.vertical-wrapper，将宽度设置为20px，高度设置为100px，居中并添加边框；
将文本元素.vertical-text的display属性设置为inline-block，将其逆时针旋转90度，并将变形的原点设置为元素左上角，这样文本就可以竖直排列；
由于旋转后的文本元素宽度太长，导致与包含它的父元素宽度冲突，因此需要设置white-space属性为nowrap，防止文本换行。

通过writing-mode属性

writing-mode是CSS3中的属性，用于指定文本的书写方式，包括水平写作（horizontal-tb）、竖直写作（vertical-rl和vertical-lr）以及倒置写作（sideways-rl和sideways-lr）。

.vertical-text {
  writing-mode: vertical-lr;
  text-orientation: upright;
  text-align: center;
}

以上代码通过writing-mode属性指定文本竖直书写方式，并将text-orientation属性设置为upright，将文本方向调整为直立。同时通过text-align属性对文本进行居中对齐。

同样，我们可以结合CSS布局进行更完整的展示。比如将竖直文本放在一个宽度固定、高度根据文本内容自适应的容器中展示。

<div class="vertical-wrapper">
  <div class="vertical-text">垂直显示文本</div>
</div>

.vertical-wrapper {
  width: 100px;
  height: auto;
  margin: 20px auto;
  border: 1px solid #999;
}

.vertical-text {
  writing-mode: vertical-lr;
  text-orientation: upright;
  text-align: center;
}

上述代码实现了一个使用writing-mode属性实现垂直文本的效果。具体说明如下：