text-indent
CSS property sets the length of empty space (indentation) that is put before lines of text in a block.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Horizontal spacing is with respect to the left (or right, for right-to-left layout) edge of the containing block-level element's content box.
/* <length> values */ text-indent: 3mm; text-indent: 40px; /* <percentage> value relative to the containing block width */ text-indent: 15%; /* Keyword values */ text-indent: 5em each-line; text-indent: 5em hanging; text-indent: 5em hanging each-line; /* Global values */ text-indent: inherit; text-indent: initial; text-indent: unset;
<length>
<length>
. Negative values are allowed. See
<length>
values for possible units.
<percentage>
<percentage>
of the containing block's width.
each-line
hanging
| 初始值 |
0
|
|---|---|
| 适用于 | block containers |
| 继承 | yes |
| 百分比 | refer 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(); |
<length-percentage> && hanging? && each-line?where
<length-percentage> = <length> | <percentage>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
p {
text-indent: 5em;
background: powderblue;
}
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
p {
text-indent: 30%;
background: plum;
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Text Module Level 3
The definition of 'text-indent' in that specification. |
工作草案 |
添加
hanging
and
each-line
keywords.
|
|
CSS Level 2 (Revision 1)
The definition of 'text-indent' in that specification. |
推荐 |
The behavior with
display: inline-block
and anonymous block boxes is explicitly defined.
|
|
CSS Level 1
The definition of 'text-indent' in that specification. |
推荐 | 初始定义。 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
text-indent
|
Chrome 完整支持 1 | Edge 完整支持 12 | Firefox 完整支持 1 | IE 完整支持 3 | Opera 完整支持 3.5 | Safari 完整支持 1 | WebView Android 完整支持 ≤37 | Chrome Android 完整支持 18 | Firefox Android 完整支持 4 | Opera Android 完整支持 14 | Safari iOS 完整支持 1 | Samsung Internet Android 完整支持 1.0 |
each-line
|
Chrome 不支持 No | Edge 不支持 No | Firefox 不支持 No | IE 不支持 No | Opera 不支持 No | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 不支持 No | Firefox Android 不支持 No | Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 不支持 No |
hanging
|
Chrome 不支持 No | Edge 不支持 No | Firefox 不支持 No | IE 不支持 No | Opera 不支持 No | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 不支持 No | Firefox Android 不支持 No | Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 不支持 No |
完整支持
不支持