css中文字竖着的代码

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

CSS中有一种字体设计叫做竖排字体,简单来说就是把文字竖着排列,而不是像我们平常见到的横着排列。要实现文字竖排效果,需要使用CSS的writing-mode属性,同时设置为vertical-rl或ve

CSS中有一种字体设计叫做竖排字体,简单来说就是把文字竖着排列,而不是像我们平常见到的横着排列。

要实现文字竖排效果,需要使用CSS的writing-mode属性,同时设置为vertical-rl或vertical-lr即可,其中rl和lr分别代表从右到左和从左到右。以下是一个简单的代码示例:

.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
} 

在上面的代码中,我们设置了一个类名为vertical-text的元素的writing-mode属性为vertical-rl,这样就把文字竖着排列了。同时,我们还设置了text-orientation为upright,使文字朝上排列。

需要注意的是,文字竖排效果在不同的浏览器中可能会略有不同,因此需要针对不同的浏览器做兼容性处理。

文章说明:

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

题图来自Unsplash,基于CC0协议

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

评论列表 评论
发布评论

评论: css中文字竖着的代码

粉丝

0

关注

0

收藏

0

已有0次打赏