Typography
text-underline-offset
用于控制文本下划线偏移的工具功能.
| Class | Styles |
|---|---|
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>使用自定义值
Use the underline-offset-[<value>] syntax to set the text underline offset based on a completely custom value:
<p class="underline-offset-[3px] ..."> <!-- ... --></p>For CSS variables, you can also use the underline-offset-(<custom-property>) syntax:
<p class="underline-offset-(--my-underline-offset) ..."> <!-- ... --></p>This is just a shorthand for underline-offset-[var(<custom-property>)] that adds the var() function for you automatically.
响应式设计
Prefix a text-underline-offset utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<p class="underline md:underline-offset-4 ..."> <!-- ... --></p>Learn more about using variants in the variants documentation.
