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-2、indent-8 等 indent-<number> 工具类，设置块级文本前显示的空白（缩进）量：

So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.

<!-- [!code classes:indent-8] -->
<p class="indent-8">So I started to walk into the water...</p>

使用负值

要使用负的文本缩进值，在类名前面加一个短横线，即可转换为负值：

So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.

<!-- [!code classes:-indent-8] -->
<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() 函数。

响应式设计

使用 md: 等断点变体作为 text-indent 工具类的前缀，即可只在中等屏幕尺寸及以上应用该工具类：

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

更多关于变体的用法，请参阅变体文档。