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:** 此类允许单词根据语言规则在断字点处自动断开。

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 断字类。它包括一个 ­(软连字符)以建议换行。'**hyphens-none**' 类即使有换行建议也会阻止断字。

示例

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 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**' 类来控制文本中的断字。应用后,它确保断字仅发生在手动指定的点上。

示例

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 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** 类会自动选择换行符而不是自动断字点。

示例

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 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>
广告