标签来分割段落，然后给段落添加一个 class 名称：
<div class="vertical"> <p class="rotate">这是第一个段落</p> <p class="rotate">这是第二个段落</p> <p class="rotate">这是第三个段落</p> </div>上述代码中，大家创建了一个
容器，并在容器中添加了三个
元素，并为每个段落都添加了一个 class 名称。 接下来，大家需要利用 CSS 中的 transform 和 display 属性来实现段落的竖排。transform 属性用于对元素进行旋转、缩放、移动等变换操作，而 display 属性用于控制元素的展示方式。为了实现段落的竖排，大家可以使用下面的代码：
.vertical {
writing-mode: vertical-lr;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
height: 100vh;
margin: 0 auto;
font-size: 20px;
}
.rotate {
transform: rotate(-90deg);
}上述代码中，大家给容器定义了 writing-mode 属性为 vertical-lr，这个属性可以让段落朝着竖直的方向排列。同时，大家使用了 display 属性来定义元素的展示方式。flex 布局可以让子元素在容器中排列，并使用 flex-direction: column 让元素垂直排列。在 align-items 和 justify-content 属性中，大家使用 center 和 space-around 来让子元素垂直居中，并在容器中留有一定的空白。
最后，大家为段落添加了一个 rotate 类型，使用 rotate(-90deg) 将段落绕 z 轴旋转 -90 度，实现了竖向排列。
通过上述 CSS 代码的调整，大家可以轻松的实现段落竖排。您可以根据自己的需求，调整容器和段落的样式以实现不同的效果。通过段落竖排，您可以创造更多样化的网页排版，提高页面的吸引力和浏览度。