字体排印
用于控制文本下划线偏移的实用工具。
| 类名 | 样式 |
|---|---|
underline-offset-<number> | text-underline-offset: <number>px; |
-underline-offset-<number> | text-underline-offset: calc(<number>px * -1); |
underline-offset-auto | text-underline-offset: auto; |
underline-offset-(<custom-property>) | text-underline-offset: var(<custom-property>); |
underline-offset-[<value>] | text-underline-offset: <value>; |
使用 underline-offset-<number> 实用工具 (如 underline-offset-2 和 underline-offset-4) 来更改文本下划线的偏移
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
<p class="underline underline-offset-1">The quick brown fox...</p><p class="underline underline-offset-2">The quick brown fox...</p><p class="underline underline-offset-4">The quick brown fox...</p><p class="underline underline-offset-8">The quick brown fox...</p>使用 underline-offset-[<value>] 语法 来设置文本下划线偏移基于完全自定义的值
<p class="underline-offset-[3px] ..."> Lorem ipsum dolor sit amet...</p>对于 CSS 变量，您还可以使用 underline-offset-(<custom-property>) 语法
<p class="underline-offset-(--my-underline-offset) ..."> Lorem ipsum dolor sit amet...</p>这只是一个简写形式，用于 underline-offset-[var(<custom-property>)] 它会自动为您添加 var() 函数。
前缀a text-underline-offset 实用工具 使用断点变体 (如 md:) 以仅在中等 屏幕尺寸及以上时应用该实用工具
<p class="underline md:underline-offset-4 ..."> Lorem ipsum dolor sit amet...</p>了解更多关于在 变体文档 中使用变体的信息。