- CSS 中文开发手册 文本缩进 | text-indent (Miscellaneous Level 1) - CSS 中文开发手册
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>可能的单位的值。
<percentage>缩进是<percentage>包含块的宽度。
each-line缩进会影响块容器的第一行以及强制换行后的每一行，但不会影响软换行后的行。
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> <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
