CSS writing-mode屬性用法及代碼示例

writing-mode CSS 屬性指定文本是按垂直方向還是水平方向書寫。如果方向是垂直的，可以是從右到左(vertical-rl)或從左到右(vertical-lr)。此屬性設置文本行是垂直還是水平布局。它指定內容在頁麵上流動的方向。它指定塊流向、塊級盒子(或容器)的堆疊方向以及它們在容器內的流動方向。

用法

writing-mode:horizontal-tb | vertical-lr | vertical-rl;

屬性值

該屬性的值定義如下。

horizontal-tb：該屬性的默認值。使用此值時，文本將在水平方向上並從左到右、從上到下閱讀。

vertical-rl：該值在垂直方向顯示文本，從上到下，從右到左閱讀文本。

vertical-lr：此值的工作方式與 vertical-rl 類似，但文本是從左到右讀取的。

示例 1

在此示例中，我們使用 CSS writing-mode 屬性的所有主要值。在這裏，有三個段落元素具有一些文本行。我們正在應用 writing-mode:horizontal-tb;到第一個段落元素，writing-mode:vertical-lr；到第二段和 writing-mode:vertical-rl;到第三段。

在輸出中，我們可以看到第二段的內容是從左到右垂直排列的，第三段的內容也是垂直排列的，但是是從右到左的。

<!DOCTYPE html>
<html>
 <head>
  <style>
    p {   
      border:2px solid black;
      width:300px;
      height:300px;
	  font-size:23px;
    }
    #tb {
      writing-mode:horizontal-tb;
    }
    
    #lr {
      writing-mode:vertical-lr;
    }
    
    #rl {
       writing-mode:vertical-rl;
    }
  </style>
 </head>
 <center>
 <body>
   <h1> Example of CSS writing-mode property </h1>
   <h2> writing-mode:horizontal-tb; </h2>
   <p id="tb"> 
   Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
   </p>
   <h2> writing-mode:vertical-lr; </h2>
   <p id="lr">
   Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
   </p>
   <h2> writing-mode:vertical-rl; </h2>
   <p id="rl">
   Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
   </p>
   </center>
 </body>
</html>

輸出

例2

在此示例中，我們還將 letter-spacing 屬性與 writing-mode 屬性一起使用。

<!DOCTYPE html>
<html>
 <head>
  <style>
    h2 {   
      border:2px solid black;
      width:300px;
      height:150px;
	  letter-spacing:15px;
    }
    #tb {
      writing-mode:horizontal-tb;
    }
    
    #lr {
      writing-mode:vertical-lr;
    }
    
    #rl {
       writing-mode:vertical-rl;
    }
  </style>
 </head>
 <center>
 <body>
   <h1> Example of CSS writing-mode property </h1>
   <h2 id="tb"> writing-mode:horizontal-tb; </h2>
   <h2 id="lr" style= "height:300px;"> writing-mode:vertical-lr; </h2><br>
   <h2 id="rl" style= "height:300px;"> writing-mode:vertical-rl; </h2>
   </center>
 </body>
</html>

輸出

相關用法

注：本文由純淨天空篩選整理自 CSS writing-mode property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。