css竖排文字怎么写

CSS竖排文字的实现方法

在网页设计中，我们经常会遇到需要将文字竖排的需求，制作一个古诗词的展示页面，或者设计一个垂直滚动的公告板等，这时，我们就可以利用CSS来实现文字的竖排，本文将详细介绍CSS竖排文字的实现方法。

1、使用writing-mode属性

writing-mode属性是CSS3新增的一个属性，用于设置文本的排列方向，它的值有两个，一个是horizontal-tb（默认值），表示水平从左到右，垂直从上到下；另一个是vertical-rl，表示垂直从右到左，水平从上到下，我们可以通过设置writing-mode为vertical-rl来实现文字的竖排。

p {
    writing-mode: vertical-rl;
}

2、使用transform属性

除了使用writing-mode属性，我们还可以使用transform属性来实现文字的竖排，transform属性有很多子属性，其中rotate()函数可以用来旋转元素，通过将旋转角度设置为180度，并结合translate()函数将元素移动到合适的位置，就可以实现文字的竖排。

p {
    transform: rotate(180deg) translateY(-100%);
}

3、使用flex布局

flex布局是CSS3新增的一种布局方式，它可以让容器内的子元素按照一定的顺序和比例进行排列，通过将容器设置为flex容器，并将子元素的flex-direction属性设置为column，就可以实现文字的竖排。

.container {
    display: flex;
    flex-direction: column;
}

4、使用text-orientation属性

text-orientation属性是SVG中的一个属性，用于设置文本的方向，它的值有三个，分别是mixed（默认值），表示自动判断文本的语言类型；upright，表示文本从左到右，从上到下；sideways，表示文本从右到左，从上到下，我们可以通过设置text-orientation为sideways来实现文字的竖排。

<text text-anchor="middle" font-size="24" fill="black" text-orientation="sideways">Hello World</text>

以上就是CSS竖排文字的四种实现方法，需要注意的是，这些方法都有其适用的场景和限制，writing-mode属性和transform属性只对部分浏览器支持；flex布局和text-orientation属性只适用于特定的元素，在实际使用时，我们需要根据具体的需求和环境来选择合适的方法。