Tailwind CSS - Whitespace
Tailwind CSS Whitespace 是一组预定义类的集合，用于控制如何在文本和布局元素中管理和显示文本之间的空格、制表符和换行符。
空白是指有助于组织内容并将其与其他元素区分开的空白区域。
Tailwind CSS Whitespace 类
以下是 Tailwind CSS Whitespace 空白类的列表，其中包含用于管理文本和布局元素中空白的属性。
| 类 | CSS 属性 |
|---|---|
| whitespace-normal | white-space: normal; |
| whitespace-nowrap | white-space: nowrap; |
| whitespace-pre | white-space: pre; |
| whitespace-pre-line | white-space: pre-line; |
| whitespace-pre-wrap | white-space: pre-wrap; |
| whitespace-break-spaces | white-space: break-spaces; |
Tailwind CSS 空白类的功能
- whitespace-normal此类使文本在其容器内正常换行。
- whitespace-nowrap此类使文本保持在一行中而不换行。
- whitespace-pre此类保留书写时的空格和换行符。
- whitespace-pre-line此类保留换行符，但合并连续的空格。
- whitespace-pre-wrap此类保留空格并将文本换行以适应其容器。
- whitespace-break-spaces此类与 whitespace-normal 类似，但允许在必要时进行额外换行以防止溢出，并尊重内容中的空格。
Tailwind CSS 空白类示例
以下是 Tailwind CSS Whitespace 类的示例，展示了如何管理和控制文本和布局元素中的间距和换行行为。
元素内的正常换行
此示例展示了如何使用 Tailwind CSS 实用程序类处理其容器内的文本换行。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-2xl font-bold mb-6">
Tailwind CSS Whitespace
</h2>
<h3 class="underline font-bold mb-6">
Applying whitespace-nowrap:
</h3>
<div class="mx-auto bg-gray-200">
<div class="whitespace-normal">
What's up?
Explore Tailwind CSS whitespace
classes like whitespace-normal for
better handling of spaces, tabs, and line breaks
in text and layouts. Boost your knowledge
with
Tutorialspoint's Tailwind tutorials!
</div>
</div>
</body>
</html>
防止文本换行
此示例展示了如何使用 Tailwind CSS 的 whitespace-nowrap 类来防止文本换行，确保文本在指定容器内保持在一行上。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-2xl font-bold mb-6">
Tailwind CSS Whitespace
</h2>
<h3 class="underline font-bold mb-6">
Applying whitespace-nowrap:
</h3>
<div class="mx-auto bg-gray-200 max-w-3xl">
<div class="whitespace-nowrap">
What's up?
Explore Tailwind CSS whitespace
classes like whitespace-nowrap for
better handling of spaces, tabs, and line breaks
in text and layouts. Boost your knowledge
with
Tutorialspoint's Tailwind tutorials!
</div>
</div>
</body>
</html>
增强文本格式
此示例展示了 Tailwind CSS 中 whitespace-pre 实用类的应用。该类应用于 <div> 元素，以展示它如何在指定容器内保持文本格式。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-2xl font-bold mb-6">
Tailwind CSS Whitespace
</h2>
<h3 class="underline font-bold mb-6">
Applying whitespace-pre:
</h3>
<div class="mx-auto bg-gray-200 ">
<div class="whitespace-pre">
What's up?
Explore Tailwind CSS whitespace
classes like whitespace-pre for
better handling of spaces, tabs, and line breaks
in text and layouts. Boost your knowledge
with
Tutorialspoint's Tailwind tutorials!
</div>
</div>
</body>
</html>
保留换行符
此示例展示了如何使用 Tailwind CSS 中的 whitespace-pre-line 实用程序类，通过保留文本的原始格式来改善文本呈现效果。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-2xl font-bold mb-6">
Tailwind CSS Whitespace
</h2>
<h3 class="underline font-bold mb-6">
Applying whitespace-pre-line:
</h3>
<div class="mx-auto bg-gray-200 ">
<div class="whitespace-pre-line">
What's up?
Explore Tailwind CSS whitespace
classes like whitespace-pre-line for
better handling of spaces, tabs, and line breaks
in text and layouts. Boost your knowledge
with
Tutorialspoint's Tailwind tutorials!
</div>
</div>
</body>
</html>
管理文本布局
此示例展示了如何使用 Tailwind CSS whitespace-pre-wrap 在元素内保留换行符和空格。文本将正常换行。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-2xl font-bold mb-6">
Tailwind CSS Whitespace
</h2>
<h3 class="underline font-bold mb-6">
Applying whitespace-pre-wrap:
</h3>
<div class="mx-auto bg-gray-200 ">
<div class="whitespace-pre-wrap">
What's up?
Explore Tailwind CSS whitespace
classes like whitespace-pre-wrap for
better handling of spaces, tabs, and line breaks
in text and layouts. Boost your knowledge
with
Tutorialspoint's Tailwind tutorials!
</div>
</div>
</body>
</html>
提升文本可读性
此示例展示了如何使用 Tailwind CSS whitespace-break-spaces 保留文本中的空格和制表符，从而增强网页上的内容呈现效果。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-2xl font-bold mb-6">
Tailwind CSS Whitespace
</h2>
<h3 class="underline font-bold mb-6">
Applying whitespace-break-spaces:
</h3>
<div class="mx-auto bg-gray-200 ">
<div class="whitespace-break-spaces">
What's up?
Explore Tailwind CSS whitespace
classes like whitespace-break-spaces for
better handling of spaces, tabs, and line breaks
in text and layouts. Boost your knowledge
with
Tutorialspoint's Tailwind tutorials!
</div>
</div>
</body>
</html>
