Tailwind CSS - 文字縮排

上一頁
下一頁

Tailwind CSS **文字縮排** 是一個預定義類集合，用於控制文字從左側縮排多少空間、調整文字的第一行或刪除 HTML 元素內的任何空格調整。

Tailwind CSS 文字縮排類

以下是 Tailwind CSS 文字縮排類的列表，其中包含控制 HTML 元素內文字縮排的屬性。

類 CSS 屬性
indent-0 text-indent: 0px;
indent-px text-indent: 1px;
indent-0.5 text-indent: 0.125rem; /* 2px */
indent-1 text-indent: 0.25rem; /* 4px */
indent-1.5 text-indent: 0.375rem; /* 6px */
indent-2 text-indent: 0.5rem; /* 8px */
indent-2.5 text-indent: 0.625rem; /* 10px */
indent-3 text-indent: 0.75rem; /* 12px */
indent-3.5 text-indent: 0.875rem; /* 14px */
indent-4 text-indent: 1rem; /* 16px */
indent-5 text-indent: 1.25rem; /* 20px */
indent-6 text-indent: 1.5rem; /* 24px */
indent-7 text-indent: 1.75rem; /* 28px */
indent-8 text-indent: 2rem; /* 32px */
indent-9 text-indent: 2.25rem; /* 36px */
indent-10 text-indent: 2.5rem; /* 40px */
indent-11 text-indent: 2.75rem; /* 44px */
indent-12 text-indent: 3rem; /* 48px */
indent-14 text-indent: 3.5rem; /* 56px */
indent-16 text-indent: 4rem; /* 64px */
indent-20 text-indent: 5rem; /* 80px */
indent-24 text-indent: 6rem; /* 96px */
indent-28 text-indent: 7rem; /* 112px */
indent-32 text-indent: 8rem; /* 128px */
indent-36 text-indent: 9rem; /* 144px */
indent-40 text-indent: 10rem; /* 160px */
indent-44 text-indent: 11rem; /* 176px */
indent-48 text-indent: 12rem; /* 192px */
indent-52 text-indent: 13rem; /* 208px */
indent-56 text-indent: 14rem; /* 224px */
indent-60 text-indent: 15rem; /* 240px */
indent-64 text-indent: 16rem; /* 256px */
indent-72 text-indent: 18rem; /* 288px */
indent-80 text-indent: 20rem; /* 320px */
indent-96 text-indent: 24rem; /* 384px */

Tailwind CSS 文字縮排類的功能

  • indent-0: 此類將文字的左側間距調整為 0 px。
  • indent-px: 此類將文字的左側間距調整為 1 px。
  • indent-*: 這表示 **Tailwind CSS 中用於文字縮排** 的類，涵蓋各種範圍。
  • indent-{0.5-4}: 此類調整文字的左側間距，範圍從 2 px（0.125 rem）到 16 px（1 rem），以 2 px 為增量增加，縮排增量為 0.5。
  • indent-{4-12}: 此類調整文字的左側間距，範圍從 16 px（1 rem）到 44 px（2.75 rem），以 4 px 為增量增加，縮排增量為 1。

  • indent-{12-16}: 此類調整文字的左側間距，範圍從 48 px（3rem）到 64 px（4rem），以 8px 為增量遞增，縮排增量為 2。
  • indent-{16-64}: 此類調整文字的左側間距，範圍從 64 px（4rem）到 256 px（16rem），以 16 px 為增量遞增，縮排增量為 4。
  • indent-{64-72}: 此類調整文字的左側間距，從 256 px（16rem）到 288 px（18rem），縮排增量為 8。
  • indent-{72-80}: 此類調整文字的左側間距，從 288 px（18rem）到 320 px（20rem），縮排增量為 8。
  • indent-{80-96}: 此類調整文字的左側間距，從 320 px（20rem）到 384 px（24rem），縮排增量為 16。

Tailwind CSS 文字縮排類示例

以下是 Tailwind CSS 文字縮排類的示例，展示瞭如何在 HTML 中的段落和其他文字元素中應用文字縮排。

調整文字縮排

此示例展示了 Tailwind CSS 如何允許調整元素內文字的左側間距。在這裡，我們使用文字縮排類以正值縮排文字。

示例

 
<!DOCTYPE html>
<html lang="en">
<head>  
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-3xl font-bold mb-6">
        Tailwind CSS  Text Indent
    </h1> 
    <p class="underline font-bold">
       Applying an indentation of 12 for left spacing
    </p>
    <p  class="indent-12">
        Tutorialspoint covers a wide array of programming 
        languages, frameworks, and tools. Whether you're 
        interested in Java, Python, C++, JavaScript, or 
        any other language, you'll find comprehensive 
        tutorials with examples and explanations.
    </p>
</body>

</html>

使用負值的文字縮排

此示例展示瞭如何在 Tailwind CSS 中使用文字縮排類透過應用負值來調整元素內文字的左側間距。負值將文字向左移動，從而改變其對齊方式和佈局。

示例

<!DOCTYPE html>
<html lang="en">
<head>  
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-3xl font-bold mb-6">
        Tailwind CSS  Text Indent
    </h1> 
    <p class="underline font-bold">
      Applying Negative indentation of 12
    </p>
    <div class="-indent-12  bg-gray-300 ml-16">
        Tutorialspoint covers a wide array of programming 
        languages, frameworks, and tools. Whether you're 
        interested in Java, Python, C++, JavaScript, or 
        any other language, you'll find comprehensive 
        tutorials with examples and explanations.
    </div>
</body>

</html>

懸停時調整文字縮排

此示例展示瞭如何使用 Tailwind CSS 在將滑鼠懸停在段落上時動態調整文字縮排。第一個段落應用了 8 個單位的正縮排，而第二個段落則在懸停時應用了 8 個單位的負縮排。

將滑鼠懸停在每個段落上，檢視文字縮排相應地發生變化。

示例

 
<!DOCTYPE html>
<html lang="en">
<head>  
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-3xl font-bold mb-6">
        Tailwind CSS  Text Indent
    </h1> 
    <div class="p-2 ml-4">
        <p class="underline font-bold">
            Applying Positive indentation of 8 on hover
        </p>

        <p class="hover:indent-8 bg-gray-300">
            Tutorialspoint covers a wide array of programming 
            languages, frameworks, and tools. Whether you're 
            interested in Java, Python, C++, JavaScript, or 
            any other language, you'll find comprehensive 
            tutorials with examples and explanations.
        </p >

        <p class="underline font-bold mt-8">
            Applying Negative indentation of 8 on hover
        </p>

        <p class="hover:-indent-8 bg-gray-300 ">
            Tutorialspoint covers a wide array of programming 
            languages, frameworks, and tools. Whether you're 
            interested in Java, Python, C++, JavaScript, or 
            any other language, you'll find comprehensive 
            tutorials with examples and explanations.
        </p> 
    </div>
</body>

</html>
列印頁面
上一頁
下一頁
廣告