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**，但允許在必要時進行額外換行以防止溢位，並尊重內容中的空格。

Tailwind CSS 空白符類示例

以下是 Tailwind CSS 空白符類的示例，展示瞭如何在文字和佈局元素中管理和控制間距和換行行為。

元素內的正常換行

此示例展示瞭如何使用 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>
列印頁面

上一頁
下一頁
廣告