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/6 和 text-lg/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.
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.
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-6 和 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.
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.
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() 函数。
响应式设计
在行高工具前加上像 md: 这样的断点变体，以便只在中等屏幕尺寸及以上应用该工具：
<p class="leading-5 md:leading-6 ...">
Lorem ipsum dolor sit amet...
</p>
在 变体文档 中了解更多关于使用变体的信息。
自定义你的主题
leading-\<number\> 工具由 --spacing 主题变量驱动，可以在你自己的主题中进行自定义：
@theme {
--spacing: 1px;
}
在 主题变量文档 中了解更多关于自定义间距比例的信息。