CSS - writing-mode 属性

CSS 的writing-mode 属性用于指定元素内文本内容的流动方向。它指定文本是应该水平显示还是垂直显示。

它在处理非拉丁脚本（如中文、日文和阿拉伯文）的文本方向以及创建创意和视觉上有趣的布局方面特别有用。

可能的值

horizontal-tb - 默认值。它将文本设置为水平书写模式，其中文本从左到右、从上到下流动，如大多数西方语言一样。
vertical-rl - 此值指定从右到左的垂直书写模式，通常用于中文、日文或韩文等脚本。文本垂直流动，从右侧开始，然后向左继续。
vertical-lr - 与vertical-rl类似，此值也表示垂直书写模式，但文本从左到右流动，用于蒙古语等脚本。
sideways-rl - 此值指定从上到下的垂直文本流动，但将文本从右到左放置。此值用于蒙古语或某些形式的垂直日文文本等垂直脚本，其中字符顺时针旋转 90 度并从右到左读取。
sideways-lr - 此值指定从下到上的垂直文本流动，但将文本从左到右放置。

CSS 中的lr、lr-tb、rl、tb、tb-lr和tb-rl书写模式已弃用，不应再使用。相反，您应该使用horizontal-tb或vertical-lr书写模式。

下表显示了已弃用的书写模式及其等效项

已弃用的值	等效值
lr	horizontal-tb
rl	horizontal-tb
lr-tb	horizontal-tb
tb	vertical-lr
tb-lr	vertical-lr
tb-rl	vertical-rl

应用于

除了表格行组、表格列组、表格行和表格列之外的所有 HTML 元素。

DOM 语法

object.style.writingMode = "horizontal-tb|vertical-rl|vertical-lr|sideways-rl|sideways-lr";

CSS writing-mode - horizontal-tb 值

以下示例演示了将writing-mode属性设置为horizontal-tb值，其中文本从左到右、从上到下读取 -

<html>
<head>
<style>
   .box {
      width: 250px;
      background-color: pink;
      writing-mode: horizontal-tb;
   }
</style>
</head>
<body>
   <h2>CSS writing-mode: horizontal-tb</h2>
   <div class="box">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   </div>
</body>
</html>

CSS writing-mode - vertical-rl 值

以下示例演示了将writing-mode属性设置为vertical-rl值，其中文本从右到左、从上到下读取 -

<html>
<head>
<style>
   .box {
      height: 250px;
      background-color: pink;
      writing-mode: vertical-rl;
   }
</style>
</head>
<body>
   <h2>CSS writing-mode: vertical-rl</h2>
   <div class="box">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   </div>
</body>
</html>

CSS writing-mode - vertical-lr 值

以下示例演示了将writing-mode属性设置为vertical-rl值，其中文本从左到右、从上到下读取：-

<html>
<head>
<style>
   .box {
      height: 250px;
      background-color: pink;
      writing-mode: vertical-lr;
   }
</style>
</head>
<body>
   <h2>CSS writing-mode: vertical-lr</h2>
   <div class="box">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
   </div>
</body>
</html>

CSS writing-mode - sideways-rl 值

sideways-rl值仅受 Firefox 浏览器支持。

以下示例演示了将writing-mode属性设置为sideways-rl值，其中文本从上到下垂直读取，字符从右到左排列 -

<html>
<head>
<style>
   .box {
      height: 300px;
      background-color: pink;
      writing-mode: sideways-rl;
   }
</style>
</head>
<body>
   <h2>CSS writing-mode: sideways-rl - This example is only supported by Firefox Browser.</h2>
   <div class="box">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
   </div>
</body>
</html>

CSS writing-mode - sideways-lr 值

sideways-lr值仅受 Firefox 浏览器支持。

以下示例演示了将writing-mode属性设置为sideways-lr值，其中文本从上到下垂直读取，字符从左到右排列 -

<html>
<head>
<style>
   .box {
      height: 300px;
      background-color: pink;
      writing-mode: sideways-lr;
   }
</style>
</head>
<body>
   <h2>CSS writing-mode: sideways-lr - This example is only supported by Firefox Browser.</h2>
   <div class="box">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
   </div>
</body>
</html>

CSS writing-mode - 审美用途（英语）

vertical-lr和vertical-rl值可用于英语的审美用途，如下例所示

<html>
<head>
<style>
   .mainbox{
      max-width: 750px;
      position: relative;
      padding-left: 80px;
      padding-top: 50px;
   }
   .box {
      height: 250px;
      background-color: pink;
   }
   h2 {
      padding-top: 70px;
      writing-mode: vertical-rl;
      position: absolute;
      left: 0;
      top: 0;
      line-height: 1;
      color: lightgreen;
      font-size: 40px;
      font-weight: 800;
   }
</style>
</head>
<body>
<div class="mainbox">
   <h2>TutorialsPoint</h2>
   <div class="box">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   </div>
   </div>
</body>
</html>

CSS writing-mode - 相关属性

以下是与 writing-mode 相关的 CSS 属性列表

属性	值
display	设置文本的方向。
unicode-bidi	确定文档中双向文本的行为。
text-orientation	设置一行中字符的方向。
text-combine-upright	将多个印刷字符单元组合到单个印刷字符单元的空间中。

打印页面