text-indent

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

text-indent CSS 属性设置区块元素中文本行前面空格（缩进）的长度。

尝试一下

水平间距是指相对于包含区块级元素内容框的左侧（或右侧，对于从右到左的布局）边缘的距离。

语法

css
/* <length> 值 */
text-indent: 3mm;
text-indent: 40px;

/* <percentage> 值，相对于包含区块的宽度 */
text-indent: 15%;

/* 关键字值 */
text-indent: 5em each-line;
text-indent: 5em hanging;
text-indent: 5em hanging each-line;

/* 全局值 */
text-indent: inherit;
text-indent: initial;
text-indent: revert;
text-indent: revert-layer;
text-indent: unset;

值

<length>

缩进以绝对 <length> 值指定。允许使用负值。请参阅 <length> 值了解可能的单位。

<percentage>

缩进是包含区块宽度的 <percentage>。

each-line

缩进会影响区块容器的第一行以及强制换行后的每一行，但不影响软换行后的行。

hanging

反转缩进行。除第一行外，所有行都将缩进。

形式定义

初始值0
适用元素区块容器
是否是继承属性是
Percentagesrefer to the width of the containing block
计算值the percentage as specified or the absolute length, plus any keywords as specified
动画类型a length, percentage or calc();

形式语法

text-indent = 
  [ <length-percentage> ]  &&
  hanging?                 &&
  each-line?               

<length-percentage> = 
  <length>      |
  <percentage>

示例

简单的缩进

HTML

html
<p>
  该段文本使用了 5em 的缩进，该段文本使用了 5em 的缩进，该段文本使用了 5em
  的缩进。
</p>
<p>
  该段文本使用了 5em 的缩进，该段文本使用了 5em 的缩进，该段文本使用了 5em
  的缩进。
</p>

CSS

css
p {
  text-indent: 5em;
  background: powderblue;
}

结果

跳过第一段的缩进

在段落缩进的情况下，一种常见的排版实践是跳过第一个段落的缩进。正如芝加哥格式手册所述，“紧跟标题后的第一行文本可以左对齐，也可以按照通常的段落缩进进行缩进。”

使用接续兄弟组合器可以对首段与后续段落进行不同处理，如下例所示：

HTML

html
<h2>标题</h2>

<p>
  这是首段段落，这个段落不会受到缩进影响。这是首段段落，这个段落不会受到缩进影响。这是首段段落，这个段落不会受到缩进影响。
</p>

<p>
  这是后续段落，这个段落会受到缩进影响。这是后续段落，这个段落会受到缩进影响。这是后续段落，这个段落会受到缩进影响。
</p>

<h2>标题</h2>

<p>
  这是首段段落，这个段落不会受到缩进影响。这是首段段落，这个段落不会受到缩进影响。这是首段段落，这个段落不会受到缩进影响。
</p>

<p>
  这是后续段落，这个段落会受到缩进影响。这是后续段落，这个段落会受到缩进影响。这是后续段落，这个段落会受到缩进影响。
</p>

CSS

css
p {
  text-align: justify;
  margin: 1em 0 0 0;
}
p + p {
  text-indent: 2em;
  margin: 0;
}

结果

百分比缩进

HTML

html
<p>
  该段文本使用了 30% 的缩进，该段文本使用了 30% 的缩进，该段文本使用了 30%
  的缩进。
</p>
<p>
  该段文本使用了 30% 的缩进，该段文本使用了 30% 的缩进，该段文本使用了 30%
  的缩进。
</p>

CSS

css
p {
  text-indent: 30%;
  background: plum;
}

结果

规范

Specification
CSS Text Module Level 3
# text-indent-property

浏览器兼容性

BCD tables only load in the browser

参见