text-indent

text-indent 属性能定义一个块元素首行文本内容之前的缩进量。

Syntax

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

/* <percentage>百分比值取决于其包含块(containing block)的宽度*/
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: unset;

Values

<length>
使用固定的<length>值来指定文本的缩进。允许使用负值。查阅可能<length> 单位。
<percentage>
使用包含块宽度的百分比作为缩进.
each-line
文本缩进会影响第一行,以及使用<br>强制断行后的第一行。
hanging
该值会对所有的行进行反转缩进:除了第一行之外的所有的行都会被缩进,看起来就像第一行设置了一个负的缩进值。

正式语法

<length-percentage> && hanging? && each-line?

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

例子

HTML

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

CSS

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

结果

规范

Specification Status Comment
CSS Text Module Level 3
text-indent
Working Draft Added the hanging and each-line keywords
CSS Transitions
text-indent
Working Draft Lists text-indent as animatable.
CSS Level 2 (Revision 1)
text-indent
Recommendation The behavior with display: inline-block and anonymous block boxes have been explicitly defined.
CSS Level 1
text-indent
Recommendation
初始值0
适用元素block containers
是否是继承属性yes
Percentagesrefer to the width of the containing block
适用媒体visual
计算值the percentage as specified or the absolute length, plus any keywords as specified
Animation typea length, percentage or calc();
正规顺序The length or percentage before the keywords, if both are present. If several keywords are present, they appear in the same order as their appearance in the formal grammar.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
text-indentChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 3Opera Full support 3.5Safari Full support 1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 1Samsung Internet Android Full support Yes
each-line
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
hanging
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.