HTML | DOM 样式 textIndent 属性

介绍

textIndent 属性设置相对于父元素的文本缩进。一般地，文本缩进是在段落的开头加入额外的空间来突出显示该段落。使用 textIndent 属性，可以在文本中的其他位置添加缩进，而不仅仅是段落开头。

语法

<style>
  selector{
    text-indent: value;
  }
</style>

值

• length：指定文本缩进的长度，可以使用 px、em、rem、cm、% 等单位。若值为 0，则不会添加缩进。

• percentage：相对父元素宽度的百分比值（只能是正数）。例如：50 代表父元素宽度的一半。

• initial：使用默认值（0）。

• inherit：从父元素继承。

示例

规定文本缩进 50px

<p style="text-indent:50px;">这是50px的缩进文本。</p>

规定文本缩进为父元素宽度的 50%

<div style="text-indent:50%;">这是父元素宽度的 50% 的缩进文本。</div>

继承 text-indent 属性

<p style="text-indent:50px;">这是50px的缩进文本。</p>
<div style="text-indent:inherit;">
  <p>这是文本缩进及其他样式继承的缩进文本。</p>
</div>

注意事项

• text-indent 属性只适用于块级元素。对于行内元素，必须先将其显示类型更改为块级元素，才能使用 text-indent 属性。

• 使用 text-indent 属性时，要注意父元素的宽度。如果宽度太小，文本缩进可能会占用大部分可用空间。

• text-indent 属性并不适用于第一行（文本或元素之前），而是适用于所有其他行（包括第一行）。

• 在设置 text-indent 属性时，最好使用 CSS 样式表代替行内样式，以提高代码可读性和可维护性。

以上是关于 HTML | DOM 样式 textIndent 属性的介绍。