Tailwind CSS - 連字元

Tailwind CSS **連字元** 是一個預定義類別的集合，這些類別控制如何在網頁上文字元素內的斷字點處斷開單詞。

Tailwind CSS 連字元類

以下是 Tailwind CSS 連字元類的列表，其中包含用於控制文字元素內單詞斷字的屬性。

類	CSS 屬性
hyphens-none	hyphens: none;
hyphens-manual	hyphens: manual;
hyphens-auto	hyphens: auto;

Tailwind CSS 連字元類的功能

**hyphens-none:** 此類確保單詞僅在指定的斷字點處斷開。
**hyphens-manual:** 此類確保單詞僅在指定的斷字點處斷開。
**hyphens-auto:** 此類允許單詞根據語言規則在斷字點處自動斷開。

Tailwind CSS 連字元類示例

以下是 **Tailwind CSS 連字元類** 的示例，這些示例顯示瞭如何在網頁上的文字元素內斷字。

防止斷字

此示例使用 Tailwind CSS 斷字類。它包括一個（軟連字元）以建議換行。'**hyphens-none**' 類即使有換行建議也會阻止斷字。

示例

 
<!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 Hyphens
    </h2> 
    <h3 class="underline font-bold mb-6">
        Applying hyphens-none
    </h3> 
    <div class="bg-gray-200 max-w-xs">  
        <p class="hyphens-none">
            This is a long word: supercalifragilisticexpialidocious.
            This word should not be hyphenated even if the line break
            suggestion is used.
        </p>
    </div>
</body>

</html>

控制斷字

此示例顯示瞭如何使用 Tailwind CSS 的 '**hyphens-manual**' 類來控制文字中的斷字。應用後，它確保斷字僅發生在手動指定的點上。

示例

<!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 Hyphens
    </h2> 
    <h3 class="underline font-bold mb-6">
        Applying hyphens-none
    </h3> 
    <div class="bg-gray-200 max-w-xs">  
        <p class="hyphen-manual">
            This is a long word:  supercalifragilisticexpialidocious
            .This word should be hyphenated as the line break suggestion 
            is used.
        </p>
    </div>
</body>

</html>

應用自動斷字

此示例顯示了 Tailwind CSS 如何使用軟連字元來指示換行符，其中 **hyphens-auto** 類會自動選擇換行符而不是自動斷字點。

示例

<!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 Hyphens
    </h2> 
    <h3 class="underline font-bold mb-6">
        Applying hyphens-auto
    </h3> 
    <div class="bg-gray-200 max-w-xs">  
        <p class="hyphens-auto">
          This is a long word:  supercalifragilisticexpialidocious.
          This word should be automatihyphenated as the line break
          suggestion is used.
        </p>
  </div>
</body>

</html>

列印頁面