css中字怎么竖着显示

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

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

在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属性来调整文字的竖直方向旋转。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中字怎么竖着显示

粉丝

0

关注

0

收藏

0

已有0次打赏