詳解css的writing-mode文字排版屬性的用法

文法：

writing-mode : lr-tb | tb-rl

/* 關鍵字值 */  writing-mode: horizontal-tb;    /* 預設值 */  writing-mode: vertical-rl;   writing-mode: vertical-lr;  /* 全域值-關鍵字inherit IE8+，initial和unset IE13才支援 */  writing-mode: inherit;   writing-mode: initial;   writing-mode: unset;

lr-tb :　 預設值。對象中的內容在水平方向上從左向右流入，後一行在前一行的下面。 所有的字形都是豎直向上的。這種布局是羅馬語系使用的

tb-rl :　 上-下，右-左。對象中的內容在垂直方向上從上向下流入，自右向左。後一豎行在前一豎行的左面。全形字元是豎直向上的，半形字元如拉丁字母或片假名順時針旋轉90度。這種布局是東亞語系通常使用的

說明：

設定或檢索對象的內容塊固有的書寫方向。西方語言確省的是左-右，上-下的書寫方式。但是亞洲語言常有上-下，右-左的書寫方式。

當此屬性值發生變化時， text-align屬性與vertical-align 屬性的作用也將發生變化。

對於下列元素來說，樣式表屬性不可繼承：

BUTTON CAPTION INPUT INPUT type=button INPUT type=file INPUT type=password INPUT type=reset INPUT type=submit INPUT type=text ISINDEX OPTION TEXTAREA

此屬性效果不會被累積作用。例如，假如父物件的此屬性值設為 tb-rl ，子物件的此屬性值設為 tb-rl 不會導致子物件的旋轉。

假如對象的 writing-mode 屬性設定和它的父物件不一樣則其將獲得自己的布局。那樣一個對象的寬度是通過使用它第一個有布局的父物件的高度而確定的。

當你使用具有不同 writing-mode 屬性值的對象時，給每一個對象指定確定的尺寸能夠讓你更好的整體控制它們的布局。

此屬性對於 currentStyle 對象而言是唯讀。對於其他對象而言是可讀寫的。

對應的指令碼特性為 writingMode 。

文字的豎排版樣本：

.verticle-mode {       writing-mode: tb-rl;       -webkit-writing-mode: vertical-rl;             writing-mode: vertical-rl;   }   /* IE7比較弱，需要做點額外的動作 */  .verticle-mode {       *width: 120px;   }   .verticle-mode h4,   .verticle-mode p {       *display: inline;       *writing-mode: tb-rl;   }   .verticle-mode h4 {       *float:rightright;   }

html如下下：

<div class="verticle-mode">      <h4>詠柳</h4>      <p>碧玉妝成一樹高，<br>萬條垂下綠絲絛。<br>不知細葉誰裁出，<br>二月春風似剪刀。</p>  </div>

我們就可以看到古詩文的豎排了！