行高 - 排版 - Tailwind CSS 中文文档

Class Styles

Class	Styles
`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-<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/6 和 text-lg/7 同时设置元素的字体大小和行高：

text-sm/6

所以我开始走进水里。我不想对你们说谎，伙计们，我感到非常害怕。但我坚持下去，当我越过破浪时，一种奇妙的平静降临于我。我不知道这是神的干预，还是所有生物之间的亲密关系，但我告诉你，杰瑞，在那一刻，我是一名海洋生物学家。

text-sm/7

text-sm/8

<p class="text-base/6 ...">所以我开始走进水里...</p>
<p class="text-base/7 ...">所以我开始走进水里...</p>
<p class="text-base/8 ...">所以我开始走进水里...</p>

每个字体大小工具类在未提供行高的情况下也会设置一个默认行高。你可以在字体大小文档中了解更多关于这些值及其自定义的信息。

使用 leading-<number> 工具类，如 leading-6 和 leading-7 来独立设置元素的行高，不受字体大小的影响：

leading-6

leading-7

leading-8

<p class="text-sm leading-6">所以我开始走进水里...</p>
<p class="text-sm leading-7">所以我开始走进水里...</p>
<p class="text-sm leading-8">所以我开始走进水里...</p>

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

灵巧的棕色狐狸跳过懒狗。

<p class="text-2xl leading-none ...">灵巧的棕色狐狸...</p>

Use the leading-[<value>] syntax to set the 行高 based on a completely custom value:

<p class="leading-[1.5] ...">
  <!-- ... -->
</p>

For CSS variables, you can also use the leading-(<custom-property>) syntax:

<p class="leading-(--my-line-height) ...">
  <!-- ... -->
</p>

This is just a shorthand for leading-[var(<custom-property>)] that adds the var() function for you automatically.

Prefix a line-height utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<p class="leading-5 md:leading-6 ...">
  <!-- ... -->
</p>

Learn more about using variants in the variants documentation.

The leading-<number> utilities are driven by the --spacing theme variable, which can be customized in your own theme:

@theme {
  --spacing: 1px; 
}

Learn more about customizing the spacing scale in the theme variable documentation.