[分享]css中字怎么竖着显示

在CSS中，如果想让文字竖着显示，就需要使用writingmode属性。该属性可以设置文字的横向或纵向显示方式。若设置为verticallr，则文字会从上往下竖直显示。如果设置为verticalrl，...

在CSS中，如果想让文字竖着显示，就需要使用writing-mode属性。该属性可以设置文字的横向或纵向显示方式。若设置为vertical-lr，则文字会从上往下竖直显示。如果设置为vertical-rl，则文字会从下往上竖直显示。

/* 竖向显示 */
.vertical-text {
  writing-mode: vertical-lr;
} 

需要注意的是，使用该属性时，文字的排版会受到影响。因此，需要对文字的排版进行调整。可以使用text-align来调整文字在竖直方向上的位置。如果需要让文字在竖直方向上水平居中，则可以设置text-align为center。还可以使用transform属性来旋转文字，使其更符合设计需求。

/* 竖向显示并水平居中 */
.vertical-text {
  writing-mode: vertical-lr;
  text-align: center;
}

/* 竖向显示并沿中心点旋转90度 */
.vertical-text {
  writing-mode: vertical-lr;
  transform: rotate(90deg);
} 

CSS还有一个叫做text-orientation的属性，可以控制文字在竖直方向上的旋转方向。该属性有两个值，分别是mixed和upright。如果设置为mixed，则文字会有正常的竖直方向和水平方向混合。如果设置为upright，则文字会在竖直方向上始终竖直排列。但目前该属性的兼容性并不好，需要谨慎使用。

/* 文字混合排列 */
.vertical-text {
  writing-mode: vertical-lr;
  text-orientation: mixed;
}

/* 始终竖直排列 */
.vertical-text {
  writing-mode: vertical-lr;
  text-orientation: upright;
} 

总之，在CSS中使文字竖着显示需要使用writing-mode属性，同时需要对排版进行调整。除此之外，还可以使用text-orientation属性来调整文字的竖直方向旋转。