Tailwind CSS - 空白符

Tailwind CSS 的**空白符**是一组预定义的类，用于控制文本和布局元素中空格、制表符和文本之间的换行符的管理和显示方式。

空白符指的是帮助组织和分隔内容与其他元素的空白区域。

Tailwind CSS 空白符类

以下是 Tailwind CSS 空白符类的列表，其中包含用于管理文本和布局元素中空白符的属性。

类	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**，但允许在必要时进行额外换行以防止溢出，并尊重内容中的空格。

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 空白符类的示例，展示了如何在文本和布局元素中管理和控制间距和换行行为。

元素内的正常换行

此示例展示了如何使用 Tailwind CSS 实用程序类在容器内处理**文本换行**。

示例

Open Compiler

 
<!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**类来防止文本换行，确保它在指定的容器内保持在单行上。

示例

Open Compiler

<!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>**元素以展示它如何在指定的容器内维护文本格式。

示例

Open Compiler

<!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**实用程序类来通过保留其原始格式来改善文本呈现。

示例

Open Compiler

<!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**来在元素内保留换行符和空格。文本将正常换行。

示例

Open Compiler

<!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**来保留文本中的空格和制表符，从而增强网页上的内容呈现。

Open Compiler

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

打印页面