如何实现文字竖排

作者:课课家教育更新于： 2019-03-19 11:18:47

       在css中，我们的文字排版通常都是从左向右，从上往下。那么，如果我们要实现页面文字竖排，应该怎样设置呢？为了解决这个问题，下面课课家网站将为大家介绍实现文字竖排的方法，有兴趣的朋友不妨参考一下。

　　一、writing-mode语法

　　要实现页面文字竖排，我们需要使用writing-mode属性，下面我们一起来了解一下它的语法：

       语法：writing-mode:lr-tb、tb-rl

　　参数：lr-tb：从左向右，从上往下；tb-rl：从上往下，从右向左

　　具体写法如下

　　writing-mode: horizontal-tb;    /* 默认值 */  

　　writing-mode: vertical-rl;  

　　writing-mode: vertical-lr;  

　　这里再介绍一种IE私有的写法：

　　writing-mode: inherit;  

　　writing-mode: initial;  

　　writing-mode: unset;  

　　注意：关键字inherit IE8+支持，initial和unset IE13才支持 

　　lr-tb : 默认值。对象中的内容在水平方向上从左向右流入，后一行在前一行的下面。所有的字形都是竖直向上的。这种布局是罗马语系使用的。

　　tb-rl : 上-下，右-左。对象中的内容在垂直方向上从上向下流入，自右向左。后一竖行在前一竖行的左面。全角字符是竖直向上的，半角字符如拉丁字母或片假名顺时针旋转90度。这种布局是东亚语系通常使用的。

　　一些说明：

　　1.相同的writing-mode属性值并不会累加，例如父子均设置了writing-mode:tb-rl，只会渲染一次，子元素并不会2次“旋转”。

　　2.IE浏览器下，一个自身具有布局的元素（不是纯文本之类元素）如果writing-mode属性值和父元素不同，当子元素的布局流变化的时候，其父元素坐标系统的可用空间会被充分利用。

　　3.Chrome浏览器下目前还需要-webkit-私有前缀，虽然Chrome和Opera认识tb-rl等老的IE属性值，但是，仅仅是认识而已，根本没有任何效果。

　　二、writing-mode的用法

　　前面说了这么多理论的东西,大家可能比较难理解.下面我们以一首古诗词作为例子来展示这个writing-mode的用法。Letgo!

　　CSS代码

　　.verticle-mode{

　　writing-mode:tb-rl;

　　-webkit-writing-mode:vertical-rl;

　　writing-mode:vertical-rl;}/*IE7比较弱，需要做点额外的动作*/.verticle-mode{

　　*width:120px;}.verticle-modeh4,.verticle-modep{

　　*display:inline;

　　*writing-mode:tb-rl;}.verticle-modeh4{

　　*float:right;}

　　html代码

咏柳

碧玉妆成一树高，
万条垂下绿丝绦。
不知细叶谁裁出，
二月春风似剪刀。

咏柳

碧玉妆成一树高，
万条垂下绿丝绦。
不知细叶谁裁出，
二月春风似剪刀。