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

??CSS 中文开发手册

文本缩进 | 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;

水平间距是相对于包含块级元素的内容框的左侧(或右侧，从右到左布局)的边缘。 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.

语法

值

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

缩进是包含块的宽度。

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;

}

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