Hyphens 连字符

控制单词断字的实用工具。

Class	Properties

基本用法

None 无

使用 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>

Manual 手动

使用 hyphens-manual 只在建议的断行位置 ­­ 处设置连字符：

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>

Auto 自动

使用 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>

有条件地应用

悬停、焦点和其他状态

Tailwind 允许您使用变体修饰符在不同状态下有条件地应用实用程序类。例如，使用 hover:hyphens-auto 只在悬停时应用 hyphens-auto 实用程序。

<p class="hyphens-none hover:hyphens-auto">
  <!-- ... -->
</p>

有关所有可用状态修改器的完整列表，请查看悬停、焦点和其他状态文档。

断点和媒体查询

您还可以使用变体修饰符来针对响应式断点、深色模式、prefers-reduced-motion 等媒体查询进行定位。例如，使用 md:hyphens-auto 仅在中等屏幕尺寸及以上应用 hyphens-auto 实用程序。

<p class="hyphens-none md:hyphens-auto">
  <!-- ... -->
</p>

要了解更多信息，请查看有关响应式设计、深色模式和其他媒体查询修饰符的文档。