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

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

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

/*  values */
text-indent: 3mm;
text-indent: 40px;

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

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

语法

值

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

缩进是包含块的宽度。

each-line缩进会影响块容器的第一行以及强制换行后的每一行，但不会影响软换行后的行。

hanging反转哪一行是缩进的。除第一行之外的所有行将被缩进。

形式语法

 && hanging? && each-line?where 
 =  | 

简单缩进示例

HTML

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

CSS

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

缩进百分比示例

HTML

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

CSS

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

规范

浏览器兼容性