1. 字体
  2. hyphens

字体

连字符

用于控制单词如何连字符化的工具类。

ClassStyles
hyphens-none
hyphens: none;
hyphens-manual
hyphens: manual;
hyphens-auto
hyphens: auto;

示例

防止连字符化

使用 hyphens-none 工具类来防止单词被连字符化,即使使用了换行建议 ­

Officially recognized by the Duden dictionary as the longest word in German, Kraftfahrzeug­haftpflichtversicherung is a 36 letter word for motor vehicle liability insurance.

<p class="hyphens-none">  ... Kraftfahrzeug&shy;haftpflichtversicherung is a ...</p>

手动连字符化

使用 hyphens-manual 工具类来仅在使用换行建议 &shy; 的地方设置连字符化点:

Officially recognized by the Duden dictionary as the longest word in German, Kraftfahrzeug­haftpflichtversicherung is a 36 letter word for motor vehicle liability insurance.

<p class="hyphens-manual">  ... Kraftfahrzeug&shy;haftpflichtversicherung is a ...</p>

这是默认的浏览器行为。

自动连字符化

使用 hyphens-auto 工具类来允许浏览器根据语言自动选择连字符化点:

Officially recognized by the Duden dictionary as the longest word in German, Kraftfahrzeughaftpflichtversicherung is a 36 letter word for motor vehicle liability insurance.

<p class="hyphens-auto" lang="de">  ... Kraftfahrzeughaftpflichtversicherung is a ...</p>

换行建议 &shy; 将优先于自动连字符化点。

响应式设计

Prefix a hyphens utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<p class="hyphens-none md:hyphens-auto ...">  Lorem ipsum dolor sit amet...</p>

Learn more about using variants in the variants documentation.

Copyright © 2025 Tailwind Labs Inc.·Trademark Policy