css中如何让文字竖着排列

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

在CSS中,我们可以使用writing-mode属性,让文字竖着排列。writing-mode属性有以下几个值:1. horizontal-tb(默认值):水平方向从左到右排列,垂直方向从上到下排列。

在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属性可能无法正常工作,建议在使用时进行测试。

文章说明:

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

题图来自Unsplash,基于CC0协议

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

评论列表 评论
发布评论

评论: css中如何让文字竖着排列

粉丝

0

关注

0

收藏

0

已有0次打赏