.vertical-text{
writing-mode: vertical-rl; /*使文字竖排*/
text-orientation: mixed; /*允许文字在竖排时存在横向，否则会自动变成纵向*/
transform: rotate(180deg); /*将文字翻转180度*/
white-space: nowrap; /*不允许文字换行*/
width: 1em; /*固定宽度防止元素超出父元素*/
}上述代码中，大家使用了writing-mode属性来实现文字竖排。其中，vertical-rl代表从右向左竖排，常用的还有vertical-lr，代表从左向右竖排。
但是，如果光使用writing-mode属性，大家会发现竖排的文字会出现横向倾斜的情况。这时，大家需要添加text-orientation: mixed属性来解决这一问题。
接着，大家需要将竖排的文字进行翻转，否则文字将倒过来写。大家通过使用transform属性，将文字沿中心轴翻转 180 度解决了这一问题。
此外，大家还需要添加white-space: nowrap属性防止文字自动换行，以及将元素宽度固定在 1em 左右来防止元素超出父元素范围。
通过上述 CSS 代码，大家就可以轻松实现文字的竖排效果啦！