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>

打印页面