1. 字体排印
  2. line-height

字体排印

line-height

用于控制元素行高(leading 或 line height)的实用工具。

类名样式
text-<size>/<number>
font-size: <size>; line-height: calc(var(--spacing) * <number>);
text-<size>/(<custom-property>)
font-size: <size>; line-height: var(<custom-property>);
text-<size>/[<value>]
font-size: <size>; line-height: <value>;
leading-none
line-height: 1;
leading-<number>
line-height: calc(var(--spacing) * <number>)
leading-(<custom-property>)
line-height: var(<custom-property>);
leading-[<value>]
line-height: <value>;

示例

基本示例

使用字体大小实用工具,例如 text-sm/6text-lg/7,同时设置元素的字体大小和行高

text-sm/6

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.

text-sm/7

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.

text-sm/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="text-base/6 ...">So I started to walk into the water...</p>
<p class="text-base/7 ...">So I started to walk into the water...</p>
<p class="text-base/8 ...">So I started to walk into the water...</p>

每个字体大小实用工具在未提供行高时也会设置默认行高。您可以在 字体大小文档 中了解有关这些值以及如何自定义它们的更多信息。

独立设置

使用 leading-<number> 实用工具(如 leading-6leading-7)独立于字体大小设置元素的行高

leading-6

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.

leading-7

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.

leading-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="text-sm leading-6">So I started to walk into the water...</p>
<p class="text-sm leading-7">So I started to walk into the water...</p>
<p class="text-sm leading-8">So I started to walk into the water...</p>

移除行高

使用 leading-none 实用工具将元素的行高设置为等于其字体大小

The quick brown fox jumps over the lazy dog.

<p class="text-2xl leading-none ...">The quick brown fox...</p>

使用自定义值

使用 leading-[<value>] 语法 来设置行高基于完全自定义的值

<p class="leading-[1.5] ...">
Lorem ipsum dolor sit amet...
</p>

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

<p class="leading-(--my-line-height) ...">
Lorem ipsum dolor sit amet...
</p>

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

响应式设计

前缀a line-height 实用工具 带有断点变体,如 md:,仅在medium 屏幕尺寸及以上尺寸应用该实用工具

<p class="leading-5 md:leading-6 ...">
Lorem ipsum dolor sit amet...
</p>

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

自定义您的主题

The leading-<number> 实用工具由 --spacing 主题变量驱动,该变量可以在您自己的主题中自定义

@theme {
--spacing: 1px;
}

主题变量文档 中了解有关自定义间距刻度的更多信息。

Copyright © 2025 Tailwind Labs Inc.·商标政策