文字排版
text-indent
用於控制區塊文字前顯示的空白量的工具類別。
| 類別 | 樣式 |
|---|---|
indent-<數字> | text-indent: calc(var(--spacing) * <數字>) |
-indent-<數字> | text-indent: calc(var(--spacing) * -<數字>) |
indent-px | text-indent: 1px; |
-indent-px | text-indent: -1px; |
indent-(<自訂屬性>) | text-indent: var(<自訂屬性>); |
indent-[<值>] | text-indent: <值>; |
範例
基本範例
使用 indent-<數字> 工具類別，例如 indent-2 和 indent-8，設定區塊文字前顯示的空白量 (縮排)。
所以我開始走進水裡。我不會騙你們，我很害怕。但我還是繼續前進，當我通過海浪時，一種奇怪的平靜感湧上心頭。我不知道是神蹟還是所有生物的親和力，但我告訴你傑瑞，那一刻，我是一位海洋生物學家。
<p class="indent-8">So I started to walk into the water...</p>使用負值
若要使用負的文字縮排值，請在類別名稱前加上破折號，將其轉換為負值。
所以我開始走進水裡。我不會騙你們，我很害怕。但我還是繼續前進，當我通過海浪時，一種奇怪的平靜感湧上心頭。我不知道是神蹟還是所有生物的親和力，但我告訴你傑瑞，那一刻，我是一位海洋生物學家。
<p class="-indent-8">So I started to walk into the water...</p>使用自訂值
使用 indent-[<值>] 語法 設定文字縮排根據完全自訂的值。
<p class="indent-[50%] ..."> <!-- ... --></p>對於 CSS 變數，您也可以使用 indent-(<自訂屬性>) 語法
<p class="indent-(--my-indentation) ..."> <!-- ... --></p>這只是 indent-[var(<自訂屬性>)] 的簡寫，會自動為您新增 var() 函式。
響應式設計
在text-indent 工具類別 前面加上 像 md: 這樣的斷點變體，以便僅在中等 螢幕尺寸及以上時套用工具類別。
<p class="indent-4 md:indent-8 ..."> <!-- ... --></p>請參閱變體文件，以深入瞭解如何在文件中使用變體。
