text-indent

text-indent

用于控制块级元素文本前空白区域大小的实用工具。

类名样式

类名	样式
`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">So I started to walk into the water...</p>

要使用负的文本缩进值，请在类名前面加上破折号，将其转换为负值

<p class="-indent-8">So I started to walk into the water...</p>

使用 indent-[<value>] 语法来设置文本缩进基于完全自定义的值

<p class="indent-[50%] ...">
  Lorem ipsum dolor sit amet...
</p>

对于 CSS 变量，您还可以使用 indent-(<custom-property>) 语法

<p class="indent-(--my-indentation) ...">
  Lorem ipsum dolor sit amet...
</p>

这只是以下语法的简写形式 indent-[var(<custom-property>)] 它会自动为您添加 var() 函数。

前缀一个 text-indent 实用工具使用断点变体（如 md:）来仅在中等屏幕尺寸及以上尺寸应用该实用工具

<p class="indent-4 md:indent-8 ...">
  Lorem ipsum dolor sit amet...
</p>

在变体文档中了解更多关于使用变体的信息。