css中writing-mode的使用詳解

我在做網頁時使用p{writing-mode:tb-rl;}時，風頁中顯示的漢字是堅排且正常顯示，但我在做我的校內網時，在我的塗鴉板中加入這段代碼*textrea{writing-mode:tb-rl;} 希望我的留言板堅棑，但結果是字是堅排了，但看著字是躺著的，即漢字順時針旋轉了90度，請問下這是為什麼，應該怎麼處理？

writing-mode屬性有兩個值lr-tb和tb-rl，前者是預設的左-右、上-下，後者是上-下、右-左。

比如：

p{writing-mode: tb-rl;}

可以結合direction排版。

運行代碼框

<style>p{writing-mode: tb-rl;}</style><p>

在CSS裡項目符號有disc（實心圓點）、circle（空心圓圈）、square（實心方塊）、decimal（阿拉伯數字）、lower-roman（小寫羅馬數字）、upper-roman（大寫羅馬數字）、lower-alpha（小寫英文字母）、upper-alpha（大寫英文字母）、none（無）。比如設定一個列表（ul或ol）的項目符號為方塊，如：

li{list-style: square;}

另外list-style還有一些值，比如可以採用一些小圖片作為項目符號，在list-style下直接寫url(“圖片地址”)就可以了。注意如果一個項目列表的左外補丁（margin-left）設為零的時候，list-style-position: outside（預設是outside）的項目符號不會顯示。可惜的是上述的項目符號似乎並不能設定大小，圓點和方塊始終是那麼點。並且不能設定垂直方向上的對齊

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>