文本缩进

文本缩进

用于控制块中文本前显示的空白空间量的工具。

Class Styles

Class	Styles
`indent-<number>`	`text-indent: calc(var(--spacing) * <number>)`
`-indent-<number>`	`text-indent: calc(var(--spacing) * -<number>)`
`indent-px`	`text-indent: 1px;`
`-indent-px`	`text-indent: -1px;`
`indent-(<custom-property>)`	`text-indent: var(<custom-property>);`
`indent-[<value>]`	`text-indent: <value>;`

indent-<number>

text-indent: calc(var(--spacing) * <number>)

-indent-<number>

text-indent: calc(var(--spacing) * -<number>)

indent-px

text-indent: 1px;

-indent-px

text-indent: -1px;

indent-(<custom-property>)

text-indent: var(<custom-property>);

indent-[<value>]

text-indent: <value>;

示例

使用 indent-<number> 工具类，如 indent-2 和 indent-8 来设置块中文本前的空白空间（缩进）量：

所以我开始走进水中。我不会对你们撒谎，伙计们，我很害怕。但是我继续前进，当我穿过破浪时，一种奇怪的平静笼罩了我。我不知道那是神的干预还是所有生物之间的亲密关系，但我告诉你，杰瑞，在那一刻，我是一名海洋生物学家。

<p class="indent-8">所以我开始走进水中...</p>

要使用负的文本缩进值，在类名前加一个破折号以将其转换为负值：

<p class="-indent-8">所以我开始走进水中...</p>

Use the indent-[<value>] syntax to set the 文本缩进 based on a completely custom value:

<p class="indent-[50%] ...">
  <!-- ... -->
</p>

For CSS variables, you can also use the indent-(<custom-property>) syntax:

<p class="indent-(--my-indentation) ...">
  <!-- ... -->
</p>

This is just a shorthand for indent-[var(<custom-property>)] that adds the var() function for you automatically.

Prefix a text-indent utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<p class="indent-4 md:indent-8 ...">
  <!-- ... -->
</p>

Learn more about using variants in the variants documentation.