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。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

Tailwind CSS 文本缩进类示例

以下是 Tailwind CSS 文本缩进类的示例，展示了如何在 HTML 中的段落和其他文本元素中应用文本缩进。

调整文本缩进

此示例展示了 Tailwind CSS 如何允许调整元素内文本的左侧间距。在这里，我们使用文本缩进类以正值缩进文本。

示例

Open Compiler

 
<!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 中使用文本缩进类通过应用负值来调整元素内文本的左侧间距。负值将文本向左移动，从而改变其对齐方式和布局。

示例

Open Compiler

<!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 个单位的负缩进。

将鼠标悬停在每个段落上，查看文本缩进相应地发生变化。

示例

Open Compiler

 
<!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>

打印页面