最近大家都看了 “满江红”了吗?我看了,评价是什么就是一个字:
回到正题啦 最近在做一个公交页面,站点是要 竖排展示的,所以抽空研究了下下,仅供大家参考
下面介绍跟竖排排版相关的3个属性:
1. writing-mode
有下面这几个值,也很好理解:
horizontal-tb:顾名思义:默认值,水平排版,tb: top to bottom:正常由上到下
vertical-rl:顾名思义:竖排展示,rl: right to left,从右往左阅读
vertical-lr:顾名思义:竖排展示,rl: left to right,从左往右阅读
2. text-orientation
这个属性主要是修改 竖排展示中的数字展示的 看到上面的例子,你会发现数字是发生了90度的旋转,为什么呢,可能是因为 汉字右横排和竖排 两张排版,但是 数字没有的,所以它会发生90度旋转
问题来了,怎么 把数字归正呢?试试这个属性:
text-orientation:upright;
但是你会发现,即使 数字归正了,我们还是读的不舒服,为什么?我们习惯1987是在一行的对吗? 要达到这种效果,就要引出我们今天介绍的最后一个属性啦~
3. text-combine-upright
加上下面这句,你可以指定某部分 文本水平排版
text-combine-upright: all;
是不是蛮神奇的?
最后看戏demo啦
就是这么朴实无华~
好啦,就这样吧,我要洗洗睡啦,这是第一篇技术分享,如果您觉得有哪些不足可以跟我说,欢迎欢迎~