Tailwind CSS - 连字符

Tailwind CSS hyphens 连字符 是一组预定义类，用于控制网页上文本元素内单词在连字符处如何断开。

Tailwind CSS hyphens 连字符类

以下是 Tailwind CSS 连字符类的列表，其中包含用于控制文本元素内单词连字符的属性。

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>