[分享]css3文字竖排显示

CSS3中有一个非常实用的功能就是文字竖排显示，这在一些设计中可以起到非常好的效果。首先需要了解的是，CSS3中文字竖排显示是通过改变文字的writingmode属性实现的。写法如下：p{ writi...

CSS3中有一个非常实用的功能就是文字竖排显示，这在一些设计中可以起到非常好的效果。

首先需要了解的是，CSS3中文字竖排显示是通过改变文字的writing-mode属性实现的。写法如下：

p{
   writing-mode: vertical-lr;
} 

其中，vertical-lr表示文字从上到下垂直排列，从左到右书写，还有其他的值，如vertical-rl表示文字从上到下垂直排列，从右到左书写。

除了writing-mode属性，还可以通过text-orientation属性改变文字的方向，使竖排文字更加的灵活。写法如下：

p{
   text-orientation: upright;
} 

其中，upright表示文字直立，还有数值型的值，如45deg表示向右倾斜45度。

需要注意的是，竖排文字显示时往往会有排版问题，因此在使用时需要仔细经过调试和设计。