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=passotword INPUT type=reset INPUT type=submit INPUT type=text ISINDEXword 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 id="咏柳">咏柳</h4>  
    <p>碧玉妆成一树高，<br>万条垂下绿丝绦。<br>不知细叶谁裁出，<br>二月春风似剪刀。</p>  
</div>

以上是css中writing-mode的使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！