Typography
用於控制文字裝飾的通用類別。
| 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>在 text-decoration-line 通用類別前面加上像 hover:* 這樣的變體，讓該通用類別只在該狀態下套用：
將滑鼠移到文字上以查看預期行為
<p>The <a href="..." class="no-underline hover:underline ...">quick brown fox</a> jumps over the lazy dog.</p>在變體文件中了解更多關於使用變體的資訊。
在 text-decoration-line 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：
<a class="no-underline md:underline ..." href="..."> <!-- ... --></a>在變體文件中了解更多關於使用變體的資訊。