css文字竖排方法举例

发布时间:2020-08-23编辑:脚本学堂
本文介绍了css实现文字竖排的几种方法,介绍4种方法来实现css文字竖排,感兴趣的朋友可以参考下。

有时需要对网页某个区域的文字竖排,竖向排列,横向的当然大家都见惯了,对于竖排,其实和横排一样简单,下面介绍4种方法来实现css文字竖排。

方法一:将需要竖排显示的字符放在span中,在css中设置span的display属性为block,不过不推荐使用这种方法,因为有些麻烦,代码如下:
css文字竖排方法

方法二a:同样使用css,在需要竖向显示的地方,强制定义显示区域的宽度,这样字符会自动竖向排列:请看具体代码:
css文字竖排方法 2

方法二b:同样是使用css,推荐使用这种方法,觉得这个方法兼容性也好,而且代码简洁,字符也容易控制。
css文字竖排方法 3

方法三:使用javascript(不推荐,其实这么一个小小的功能,动用js就太不划算了,毕竟我们有比这更有效、更简洁的办法)

方法四:
css文字竖排方法 4

至于用哪种方法,大家请根据实际需要自行选择。