CSS text-indent 属性-之路教程

CSS text-indent 属性值说明

值	描述
length	指定PX，PT，CM，EM等中的缩进等默认值为0.允许否定值。
percentage	指定包含块宽度的百分比的缩进。
each-line	压痕影响第一行以及强制换行后的每条线，但在软包突破后不会影响线条。值是实验技术。
hanging	转换哪条线缩进。第一行不是缩进。这个价值是一种实验技术。
initial	使属性使用其默认值。
inherit	从父母元素继承属性。

语法

text-indent: length | percentage | each-line | hanging | initial | inherit;

text-indent 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      p {
        text-indent: 100px;
      }
    </style>
  </head>
  <body>
    <h2>Text-indent 属性示例</h2>
    <p>
      今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
    </p>
  </body>
</html>

在“pt”、“em”、“%”和“cm”中指定的文本缩进属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      div.a {
        text-indent: 20pt;
      }
      div.b {
        text-indent: -5em;
      }
      div.c {
        text-indent: 70%;
      }
      div.d {
        text-indent: 4em;
      }
      div.e {
        text-indent: 5cm;
      }
    </style>
  </head>
  <body>
    <h2>Text-indent 属性示例</h2>
    <h3>text-indent: 20pt</h3>
    <div class="a">
      经历过风雨，才懂得阳光的温暖。 今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
    </div>
    <h3>text-indent: -5em</h3>
    <div class="b">
      今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
    </div>
    <h3>text-indent: 70%</h3>
    <div class="c">
      今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
    </div>
    <h3>text-indent: 4em</h3>
    <div class="d">
      今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
    </div>
    <h3>text-indent: 5cm</h3>
    <div class="e">
      今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
    </div>
  </body>
</html>

CSS text-indent 属性

text-indent 属性指定文本块中第一行的空白长度。
文本的方向由 direction 属性指定。

如果指定了负值，则第一行将向左缩进。
文本缩进仅适用于元素中的第一行文本。

值 "each-line" 和"hanging"是实验性的。

初始值	0
应用于	块容器。
继承	可继承
可动画的	是的。文本缩进是可动的。
版本	CSS1
DOM 语法	object.style.textInent =“100px”;

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

←CSS text-fill-color 属性

CSS text-justify 属性→

CSS text-indent 属性值说明

语法

text-indent 属性示例：

在“pt”、“em”、“%”和“cm”中指定的文本缩进属性示例：

目录