此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
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 2015年7月.
* Some parts of this feature may have varying levels of support.
text-indent CSS 属性设置区块元素中文本行前面空格(缩进)的长度。
尝试一下
text-indent: 0;
text-indent: 30%;
text-indent: -3em;
text-indent: 3em each-line;
text-indent: 3em hanging;
text-indent: 3em hanging each-line;
<section id="default-example">
<div id="example-element">
<p>
This text is contained within a single paragraph. This paragraph is two
sentences long.
</p>
<p>
This is a new paragraph. There is a line break element
<code><br></code> after this sentence.<br />There it is! Notice how
it affects the indentation.
</p>
</div>
</section>
section {
font-size: 1.25em;
background-color: #483d8b;
align-items: start;
}
#example-element {
text-align: left;
margin: 0 0 0 3em;
background-color: #6a5acd;
color: white;
}
水平间距是指相对于包含区块级元素内容框的左侧(或右侧,对于从右到左的布局)边缘的距离。
语法
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><percentage>-
缩进是包含区块宽度的
<percentage>。 each-line-
缩进会影响区块容器的第一行以及强制换行后的每一行,但不影响软换行后的行。
hanging-
反转缩进行。除第一行外,所有行都将缩进。
形式定义
形式语法
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 |
浏览器兼容性
Loading...