text-indent

text-indent

用于控制文本在块级元素前显示的空白空间的实用工具。

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%] ...">  Lorem ipsum dolor sit amet...</p>

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

<p class="indent-(--my-indentation) ...">  Lorem ipsum dolor sit amet...</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 ...">  Lorem ipsum dolor sit amet...</p>

Learn more about using variants in the variants documentation.