text-indent

text-indent

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

类样式

类	样式
`indent-<数字>`	`text-indent: calc(var(--spacing) * <数字>)`
`-indent-<数字>`	`text-indent: calc(var(--spacing) * -<数字>)`
`indent-px`	`text-indent: 1px;`
`-indent-px`	`text-indent: -1px;`
`indent-(<自定义属性>)`	`text-indent: var(<自定义属性>);`
`indent-[<值>]`	`text-indent: <值>;`

indent-<数字>

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

-indent-<数字>

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

indent-px

text-indent: 1px;

-indent-px

text-indent: -1px;

indent-(<自定义属性>)

text-indent: var(<自定义属性>);

indent-[<值>]

text-indent: <值>;

示例

使用 indent-<数字> 实用工具，例如 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-[<值>] 语法设置文本缩进基于完全自定义的值

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

对于 CSS 变量，您也可以使用 indent-(<自定义属性>) 语法

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

这只是 indent-[var(<自定义属性>)] 的简写形式，会自动为您添加 var() 函数。

在a text-indent 实用工具前添加一个断点变体，例如 md:，以便仅在中等屏幕尺寸及以上时应用该实用工具。

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

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