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

在CSS中，我们可以使用writingmode属性，让文字竖着排列。writingmode属性有以下几个值：1. horizontaltb（默认值）：水平方向从左到右排列，垂直方向从上到下排列。2. ...

在CSS中，我们可以使用writing-mode属性，让文字竖着排列。writing-mode属性有以下几个值：
1. horizontal-tb（默认值）：水平方向从左到右排列，垂直方向从上到下排列。
2. vertical-rl：水平方向从下到上排列，垂直方向从右到左排列。
3. vertical-lr：水平方向从上到下排列，垂直方向从左到右排列。
我们可以使用writing-mode: vertical-rl;将文字竖着排列。例如：

p {
  writing-mode: vertical-rl;
} 

上述代码表示所有p标签内的文字都会竖着排列。需要注意的是，当文字竖着排列时，文字的起始位置为最右侧，因此需要通过其他样式调整文字位置，例如：

p {
  writing-mode: vertical-rl;
  transform: translateX(1em);
  text-align: center;
} 

上述代码表示竖向排列的文字整体向右平移1个em的距离，并且居中对齐。需要根据实际情况和需求做出适量调整。
除了writing-mode属性，我们还可以使用text-orientation属性来控制文字方向。text-orientation属性有以下几个值：
1. mixed：默认值，水平和竖直文本混合。
2. upright：水平文本方向。
3. sideways：垂直排版。
我们可以使用text-orientation: sideways;让文字竖着排列。例如：

p {
  text-orientation: sideways;
  writing-mode: vertical-rl;
} 

上述代码表示所有p标签内的文字都会竖着排列，并且文字方向为垂直排版。需要注意的是，在某些浏览器中，text-orientation属性可能无法正常工作，建议在使用时进行测试。