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.