CSS的writing-mode文字排版屬性使用步驟

本篇內容介紹了“CSS的writing-mode文字排版屬性使用步驟”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

語法：

CSS Code復制內容到剪貼板

1. writing-mode : lr-tb | tb-rl  

CSS Code復制內容到剪貼板

1. /* 關鍵字值 */  

2. writing-mode: horizontal-tb;    /* 默認值 */  

3. writing-mode: vertical-rl;   

4. writing-mode: vertical-lr;  

CSS Code復制內容到剪貼板

1. /* 全局值-關鍵字inherit IE8+，initial和unset IE13才支持 */  

2. writing-mode: inherit;   

3. writing-mode: initial;   

4. 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 。

文字的豎排版示例：

CSS Code復制內容到剪貼板

1. .verticle-mode {   

2.     writing-mode: tb-rl;   

3.     -webkit-writing-mode: vertical-rl;         

4.     writing-mode: vertical-rl;   

5. }   

6. /* IE7比較弱，需要做點額外的動作 */  

7. .verticle-mode {   

8.     *width: 120px;   

9. }   

10. .verticle-mode h5,   

11. .verticle-mode p {   

12.     *display: inline;   

13.     *writing-mode: tb-rl;   

14. }   

15. .verticle-mode h5 {   

16.     *float:rightright;   

17. }   

html如下下：

XML/HTML Code復制內容到剪貼板

1. <div class="verticle-mode">  

2.     <h5>詠柳</h5>  

3.     <p>碧玉妝成一樹高，<br>萬條垂下綠絲絳。<br>不知細葉誰裁出，<br>二月春風似剪刀。</p>  

4. </div>  

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

“CSS的writing-mode文字排版屬性使用步驟”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！