CSS text-orientation 文本方向属性-之路教程

语法

text-orientation: mixed | upright | sideways | sideways-right | use-glyph-orientation | initial | inherit;

具有“混合”值的文本方向属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      p {
        writing-mode: vertical-rl;
        text-orientation: mixed;
      }
    </style>
  </head>
  <body>
    <h2>Text-orientation 属性示例</h2>
    <p>生活终归还得继续。.</p>
  </body>
</html>

具有“upright”值的文本方向属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      p {
        writing-mode: vertical-lr;
        text-orientation: upright;
      }
    </style>
  </head>
  <body>
    <h2>Text-orientation 属性示例</h2>
    <p>生活终归还得继续。.</p>
  </body>
</html>

文本方向属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      body {
        background-color: #ffffff;
        color: #000000;
        font-size: 1.1em;
      }
      .example {
        background: #cccccc;
        color: #fff;
        padding: 3em;
        margin: 40px auto 0;
        width: 400px;
        max-width: 400px;
        display: flex;
      }
      h1 {
        color: #8ebf42;
        margin: 0.15em 0.75em 0 0;
        font-family: 'Bungee Shade', cursive;
        -webkit-writing-mode: vertical-lr;
        -ms-writing-mode: tb-lr;
        writing-mode: vertical-lr;
        text-orientation: upright;
        -webkit-font-feature-settings: "vkrn", "vpal";
        font-feature-settings: "vkrn", "vpal";
      }
      p {
        margin: 0;
        line-height: 1.5;
        font-size: 1.15em;
      }
    </style>
  </head>
  <body>
    <h2>Text-orientation 属性示例</h2>
    <div class="example">
      <h1>Lorem Ipsum</h1>
      <p>
        今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
      </p>
    </div>
  </body>
</html>

CSS text-orientation 属性值说明

值	描述
mixed	字符顺时针旋转90°。这是此属性的默认值。
upright	水平脚本的字符自然地（直立），以及垂直脚本的字形。此属性使所有字符都被视为左右：使用的使用值被强制为LTR。
sideways	这些字符被定制，因为它们会水平，但整个线顺时针旋转90°。
sideways-right	侧向的别名，用于兼容兼容性目的。
use-glyph-orientation	导致使用过时的SVG属性的值术语 - 垂直 - 垂直和晶格定向 - 水平。此值不再使用。
initial	它使属性使用其默认值。
inherit	它从其父母元素继承了属性。

CSS text-orientation 文本方向属性

text-orientation 属性指定一行中字符的方向。

它有五个值：mixed、upright、sideways、sideways-right、use-glyph-orientation。
它们都在垂直排版模式下工作。

此属性具有“sideways-left”和“sideways-right”值，现在它们被重新定义为“sideways-right”值之一。
相反，“sideways-lr”和“sideways-rl”值被添加到 write-mode 属性中，以便在非垂直书写系统中使用它。

text-orientation 属性仅在写入模式为“vertical”时有效。

初始值	mixed
应用于	所有元素，除表行组，行，列组和列之外。
继承	可继承
可动画的	无效
版本	CSS3.
DOM 语法	object.style.textorientation =“nulright”;

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

←CSS text-justify 属性

CSS text-overflow 属性→

语法

具有“混合”值的文本方向属性示例：

具有“upright”值的文本方向属性示例：

文本方向属性示例：

CSS text-orientation 属性值说明

目录