你会用css写竖版满江红吗?现在来教你

306 阅读1分钟

最近大家都看了 “满江红”了吗?我看了,评价是什么就是一个字:

7f373d1fec08f2a6649e78cfa2db7bb4.gif

回到正题啦 最近在做一个公交页面,站点是要 竖排展示的,所以抽空研究了下下,仅供大家参考

下面介绍跟竖排排版相关的3个属性:

1. writing-mode

有下面这几个值,也很好理解:

horizontal-tb:顾名思义:默认值,水平排版,tb: top to bottom:正常由上到下

image.png

vertical-rl:顾名思义:竖排展示,rl: right to left,从右往左阅读

image.png

vertical-lr:顾名思义:竖排展示,rl: left to right,从左往右阅读

image.png

2. text-orientation

这个属性主要是修改 竖排展示中的数字展示的 看到上面的例子,你会发现数字是发生了90度的旋转,为什么呢,可能是因为 汉字右横排和竖排 两张排版,但是 数字没有的,所以它会发生90度旋转

问题来了,怎么 把数字归正呢?试试这个属性:

text-orientation:upright;

image.png

但是你会发现,即使 数字归正了,我们还是读的不舒服,为什么?我们习惯1987是在一行的对吗? 要达到这种效果,就要引出我们今天介绍的最后一个属性啦~

3. text-combine-upright

加上下面这句,你可以指定某部分 文本水平排版

text-combine-upright: all;

image.png

是不是蛮神奇的?

最后看戏demo啦

image.png

就是这么朴实无华~

好啦,就这样吧,我要洗洗睡啦,这是第一篇技术分享,如果您觉得有哪些不足可以跟我说,欢迎欢迎~