文本缩进 | text-indent (Miscellaneous Level 1) - CSS 中文开发手册 - Break易站

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

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

语法

值

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

规范

浏览器兼容性

??CSS 中文开发手册