1. 排版
  2. line-height

排版

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

示例(Examples)

¥Examples

基本示例(Basic example)

¥Basic example

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

¥Use font size utilities like text-sm/6 and text-lg/7 to set the font size and line-height of an element at the same time:

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>

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

¥Each font size utility also sets a default line height when one isn't provided. You can learn more about these values and how to customize them in the font-size documentation.

单独设置(Setting independently)

¥Setting independently

使用 leading-<number> 工具(如 leading-6leading-7)设置行元素的高度与字体大小无关:

¥Use leading-<number> utilities like leading-6 and leading-7 to set the line height of an element independent of the font-size:

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>

删除前导(Removing the leading)

¥Removing the leading

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

¥Use the leading-none utility to set the line height of an element equal to its font size:

The quick brown fox jumps over the lazy dog.

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

使用自定义值(Using a custom value)

¥Using a custom value

使用 leading-[<value>] 语法 根据完全自定义的值设置 line height

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

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

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

这只是简写,用于 leading-[var(<custom-property>)] 它会自动为你添加 var() 函数。

响应式设计(Responsive design)

¥Responsive design

line-height 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具:

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

请参阅 变体文档 详细了解如何使用变体。

自定义主题(Customizing your theme)

¥Customizing your theme

leading-<number> 工具由 --spacing 主题变量驱动,可以在你自己的主题中进行自定义:

@theme {
--spacing: 1px;
}

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

TailwindCSS v4.0 中文网 - 粤ICP备13048890号