Lzh on GitHub

text-indent

用于控制文本块中文字前空白空间的工具。

快速参考

类别样式
indent-<number>text-indent: calc(var(--spacing) * <number>)
-indent-<number>text-indent: calc(var(--spacing) * -<number>)
indent-pxtext-indent: 1px;
-indent-pxtext-indent: -1px;
indent-(<custom-property>)text-indent: var(<custom-property>);
indent-<value>text-indent: <value>;

示例

基本示例

使用 indent-<number> 工具（例如 indent-2 和 indent-8）来设置文本块中文字前的空白空间（缩进量）：

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. 

<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. 

<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>

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