css3让文字竖向排列

CSS3是一种比较新的标记语言，可以帮助我们在网页中实现各种各样的效果，其中包括让文字竖向排列。下面我们来了解一下如何使用CSS3实现文字竖向排列。

/* HTML代码 */
<div class="vertical-text">
   <p>这是竖向排列的文字</p>
   <p>This is vertical text.</p>
</div>

/* CSS代码 */
.vertical-text {
   display: flex;
   flex-direction: column;
   writing-mode: vertical-lr;
   text-orientation: upright;
   height: 200px;
}

.vertical-text p {
   margin: 0;
   padding: 0;
   text-align: center;
}

在上面的代码中，我们使用了 display: flex 属性来让容器内元素排列方式变为“弹性盒子”，这样就可以让文本元素竖向排列了。添加 flex-direction: column 属性可以让子元素垂直排列。

接下来，我们需要使用 writing-mode 属性，并将值设置为 vertical-lr，来实现文字的竖向排列。而 text-orientation: upright 属性用于把文本正立显示，而不是倾斜。

最后，为了让文本在垂直方向居中，我们可以使用 height 和 text-align: center 属性来实现。

通过以上这些CSS样式的设置，我们就可以实现文字竖向排列的效果了。希望这篇文章对您有所帮助。