CSS writing-mode 属性-之路教程

CSS writing-mode 属性

CSS 书写模式writing-mode 属性指定文本应该垂直还是水平布局。

此属性更改文本的对齐方式，以便可以从上到下或者从左到右阅读，具体取决于语言。
例如，东亚语言如中文或者日语是横写的，或者一些语言是竖写的。

写入模式属性影响块流向，块流向是块级容器堆叠的方向，以及行内内容在块容器内流动的方向。

为了获得最大的浏览器兼容性扩展，例如 -webkit- 用于 Safari、Google Chrome 和 Opera（较新版本）与此属性一起使用。

初始值	horizontal-tb
应用于	除表行组，表列组，表行，表列，ruby基础容器，ruby注释容器中的所有元素。
继承	可继承
可动画的	无效
版本	CSS3.
DOM 语法	object.Style.WritingMode =“"vertical-lr";

语法

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

具有“horizontal-tb”值的写入模式属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      p {
        font-size: 20px;
        -webkit-writing-mode: horizontal-tb;
        -ms-writing-mode: horizontal-tb;
        writing-mode: horizontal-tb;
      }
      p::first-letter {
        color: #1c87c9;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h2>Writing-mode 属性示例</h2>
    <p>
      生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
    </p>
  </body>
</html>

内容从上到下、从右到左垂直流动的另一个示例。

具有“vertical-rl”值的writing-mode属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>The 文档的标题</title>
    <style>
      p {
        font-size: 20px;
        -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: vertical-rl;
        writing-mode: vertical-rl;
      }
      p::first-letter {
        color: #1c87c9;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h2>Writing-mode 属性示例</h2>
    <p>
      生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
    </p>
  </body>
</html>

在以下示例中，内容从上到下、从左到右垂直流动。

具有“vertical-lr”值的writing-mode属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>The 文档的标题</title>
    <style>
      p {
        font-size: 20px;
        -webkit-writing-mode: vertical-lr;
        -ms-writing-mode: vertical-lr;
        writing-mode: vertical-lr;
      }
      p::first-letter {
        color: #1c87c9;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h2>Writing-mode 属性示例</h2>
    <p>
     生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
    </p>
  </body>
</html>

CSS writing-mode 属性值说明

值	描述
horizontal-tb	内容从左到右从左到右水平流动，从上到下流动。
vertical-rl	内容从上到下，从右到左垂直流动。
vertical-lr	内容从上到下，从左到右水平流动。
sideway-rl	内容从上到下流动，所有字形的所有字形都侧向朝向右侧。
sideway-lr	内容从上到下垂直流动，并且所有字形的所有字形都侧向向左设定。
initial	使属性使用其默认值。
inherit	从父母元素继承属性。

日期：2020-06-02 22:14:52 来源：oir作者：oir

←CSS word-wrap属性

CSS z-index 属性→

语法

具有“horizontal-tb”值的写入模式属性示例：

具有“vertical-rl”值的writing-mode属性示例：

具有“vertical-lr”值的writing-mode属性示例：

CSS writing-mode 属性值说明

目录