詳解CSS的writing-mode文字排版屬性所使用的方法

writing-mode經常被用來實現頁面文字的豎排,這裡我們來系統地看一下詳解CSS的writing-mode文字排版屬性使用的方法,其中包括一個古詩的例子來展示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=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如下下：

<p class="verticle-mode">
    <h4>咏柳</h4>
    <p>碧玉妆成一树高，<br>万条垂下绿丝绦。<br>不知细叶谁裁出，<br>二月春风似剪刀。</p>
</p>

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

以上是詳解CSS的writing-mode文字排版屬性所使用的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！