Typography
text-decoration-line
用于控制文本装饰的工具类
| Class | Styles |
|---|---|
underline | text-decoration-line: underline; |
overline | text-decoration-line: overline; |
line-through | text-decoration-line: line-through; |
no-underline | text-decoration-line: none; |
示例
为文本添加下划线
使用 underline 工具类为文本添加下划线：
The quick brown fox jumps over the lazy dog.
<p class="underline">The quick brown fox...</p>为文本添加上划线
使用 overline 工具类为文本添加上划线：
The quick brown fox jumps over the lazy dog.
<p class="overline">The quick brown fox...</p>为文本添加删除线
使用 line-through 工具类为文本添加删除线：
The quick brown fox jumps over the lazy dog.
<p class="line-through">The quick brown fox...</p>去除文本的装饰线
使用 no-underline 工具类去除文本的装饰线：
The quick brown fox jumps over the lazy dog.
<p class="no-underline">The quick brown fox...</p>悬停时应用
Prefix a text-decoration-line utility with a variant like hover:* to only apply the utility in that state:
将鼠标悬停在文本上查看预期效果
The quick brown fox jumps over the lazy dog.
<p>The <a href="..." class="no-underline hover:underline ...">quick brown fox</a> jumps over the lazy dog.</p>Learn more about using variants in the variants documentation.
响应式设计
Prefix a text-decoration-line utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<a class="no-underline md:underline ..." href="..."> <!-- ... --></a>Learn more about using variants in the variants documentation.
