文字排版
text-decoration-line
用於控制文字裝飾的 Utilities。
| Class | 樣式 |
|---|---|
underline | text-decoration-line: underline; |
overline | text-decoration-line: overline; |
line-through | text-decoration-line: line-through; |
no-underline | text-decoration-line: none; |
範例
文字加上底線
使用 underline utility 在元素的文字上加上底線
The quick brown fox jumps over the lazy dog.
<p class="underline">The quick brown fox...</p>在文字上方加上橫線
使用 overline utility 在元素的文字上加上橫線
The quick brown fox jumps over the lazy dog.
<p class="overline">The quick brown fox...</p>在文字中間加上刪除線
使用 line-through utility 在元素的文字中間加上刪除線
The quick brown fox jumps over the lazy dog.
<p class="line-through">The quick brown fox...</p>移除文字上的線
使用 no-underline utility 移除元素文字上的線
The quick brown fox jumps over the lazy dog.
<p class="no-underline">The quick brown fox...</p>在 hover 時套用
前綴a 將 text-decoration-line utility 與變體 (variant) 搭配使用，例如 hover:* 以僅在該狀態下套用 utility
將滑鼠懸停在文字上方以查看預期效果
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>在變體 (variants) 文件中了解更多關於使用變體 (variants) 的資訊。
響應式設計
前綴a text-decoration-line utility 與斷點變體 (breakpoint variant) 搭配使用，例如 md: 以僅在medium 及以上的螢幕尺寸下套用 utility
<a class="no-underline md:underline ..." href="..."> <!-- ... --></a>在變體 (variants) 文件中了解更多關於使用變體 (variants) 的資訊。
