CSS3实现文本垂直排列的方法

CSS3实现文本垂直排列的方法实现文本垂直排列的方法

主要介绍了CSS3实现文本垂直排列的方法，也就是运用了CSS的writing-mode属性，小编觉得挺不错的，现在

分享给大家，也给大家做个参考。一起跟随小编过来看看吧

最近的一个项目中要使文字垂直排列，也就是运用了CSS的writing-mode属性。

writing-mode最初时ie中支持的一个属性，后来在CSS3中增添了这一新的属性，所以在ie中和其他浏览器中的语法会有区别。

1.0 CSS3标准标准

writing-mode:horizontal-tb;//默认：水平方向，从上到下

writing-mode:vertical-rl; //垂直方向，从右向左

<title>CSS文字垂直排列</title>

<style type="text/css">

div{

border: 1px solid lightblue;

padding: 5px;

}

.vertical-text{

-webkit-writing-mode: vertical-rl;

writing-mode: vertical-rl;

}

</div>

</body>

</html>

2.0 IE中中

由于历史的原因，IE下该属性值则显得尤为复杂：

-ms-writing-mode: lr-tb | rl-tb | tb-rl | bt-rl | tb-lr | bt-lr | lr-bt | rl-bt | lr | rl | tb

具体可以查看官方文档：

https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode/

3.0 一些应用一些应用

3.1 垂直居中垂直居中