文本缩进 | text-indent

文本缩进

text-indentCSS属性指定在一个块的文本行之前把压痕（空的空间）的量。默认情况下，这只控制块的第一个格式化行的缩进，但可以使用hanging和each-line关键字来改变这种行为。

/* <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;

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

Initial value	0
应用对象	block containers
是否可继承	yes
百分比值	refer to the width of the containing block
媒体	visual
计算值	the percentage as specified or the absolute length, plus any keywords as specified
动画类型	a 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.

语法

值

<length>缩进被指定为绝对<length>。负值是允许的。查看<length>可能的单位的值。

形式语法

<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>
<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;
}

缩进百分比示例

HTML

<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>

CSS

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

规范

Specification	Status	Comment
CSS Text Module Level 3The definition of 'text-indent' in that specification.	Working Draft	Adds the hanging and each-line keywords.
CSS TransitionsThe definition of 'text-indent' in that specification.	Working Draft	Lists text-indent as animatable.
CSS Level 2 (Revision 1)The definition of 'text-indent' in that specification.	Recommendation	The behavior with display: inline-block and anonymous block boxes is explicitly defined.
CSS Level 1The definition of 'text-indent' in that specification.	Recommendation	Initial definition.

浏览器兼容性

Feature	Firefox (Gecko)	Chrome	Edge	Internet Explorer	Opera	Safari
Basic support	1.0 (1.7 or earlier)	1.0	(Yes)	3.0	3.5	1.0 (85)
hanging	No support1	No support	No support	No support	No support	No support
each-line	No support1	No support	No support	No support	No support	No support

Feature	Firefox Mobile (Gecko)	Android	Edge	IE Phone	Opera Mobile	Safari Mobile
Basic support	1.0 (1.9.2)	?	(Yes)	?	?	?
hanging	No support	No support	No support	No support	No support	No support
each-line	No support	No support	No support	No support	No support	No support