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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。