Tailwind CSS - Text Indent
Tailwind CSS Text Indent 是一组预定义类，用于控制文本从左侧缩进的间距、调整文本首行或移除 HTML 元素内的任何间距调整。
Tailwind CSS Text Indent 类
以下是 Tailwind CSS Text Indent 文本缩进类的列表，这些类的属性用于控制 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 像素。
- indent-px:此类将文本的左间距调整为 1 像素。
- indent-*:这表示 Tailwind CSS 中用于文本缩进的类，涵盖各种范围。
- indent-{0.5-4}:此类将文本的左间距调整范围从 2 像素(1.125 rem)到 16 像素(1 rem)，以 2 像素为增量增加，缩进增量为 0.5。
- indent-{4-12}:此类将文本的左间距调整范围从 16 像素(1 rem)到 44 px(2.75 rem)，以 4 px 为增量增加，缩进增量为 1。
- indent-{12-16}:此类将文本左间距调整范围从 48 px(3 rem)到 64 px(4 rem)，以 8px 为增量增加，缩进增量为 2。
- indent-{16-64}:此类将文本左间距调整范围从 64 px(4 rem)到 256 px(16 rem)，以 16 px 为增量增加，缩进增量为 4。
- indent-{64-72}:此类将文本左间距调整范围从 256 px(16 rem)到 288 px(18 rem)，缩进增量为 8。
- indent-{72-80}:此类将文本左间距从 288 像素 (18 rem) 调整为 320 像素 (20 rem)，缩进增量为 8。
- indent-{80-96}:此类将文本左间距从 320 像素 (20 rem) 调整为 384 像素 (24 rem)，缩进增量为 16。
Tailwind CSS 文本缩进类示例
以下是 Tailwind CSS 文本缩进类示例，展示了如何将文本缩进应用于 HTML 中的段落和其他文本元素。
调整文本缩进
此示例展示了 Tailwind CSS 如何调整左元素内文本的间距。这里我们使用 Text Indent 类将文本缩进正值。
示例
<!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>
