[分享]css中如何让文字竖直排列

在CSS中，我们可以通过设置文本的方向和旋转角度来实现竖直排列效果。一、设置文本方向可以使用CSS的writingmode属性来设置文本的方向，其取值包括：1、horizontaltb：默认值，水平方...

在CSS中，我们可以通过设置文本的方向和旋转角度来实现竖直排列效果。
一、设置文本方向
可以使用CSS的writing-mode属性来设置文本的方向，其取值包括：
1、horizontal-tb：默认值，水平方向从左到右
2、vertical-rl：竖直方向从上到下，文字从右向左
3、vertical-lr：竖直方向从上到下，文字从左向右
例如，在p标签中加入样式writing-mode:vertical-rl;就可以使文字竖直排列，示例如下：

<style>
p{
    writing-mode:vertical-rl;
}
</style>
<p>这是一段竖直排列的文字</p> 

二、设置旋转角度
除了通过writing-mode属性控制文本方向，还可以通过transform属性中的rotate函数来实现文字的旋转。当设置旋转角度为90度或者270度时，文字就会竖直排列。
例如，在p标签中加入样式transform:rotate(90deg);就可以使文字竖直排列，示例如下：

<style>
p{
    transform:rotate(90deg);
}
</style>
<p>这是一段竖直排列的文字</p> 

需要注意的是，在使用rotate函数时，要结合设置元素的宽度和高度，以免文字被旋转后出现遮挡。
综上所述，我们可以通过CSS中的writing-mode属性和transform属性来实现文字的竖直排列效果，开发者可以根据实际情况选择不同的方式来实现。