1. 排版
  2. 连字符

Quick reference

Class
Properties
hyphens-nonehyphens: none;
hyphens-manualhyphens: manual;
hyphens-autohyphens: auto;

基础用法

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>

手动的

使用 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 允许浏览器根据语言自动选择连字点。换行符建议 &shy; 将优先于自动连字点。

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 来仅 在 hover应用 hyphens-auto.

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

详细了解, 请参考 Hover, Focus, & Other States 文档.

断点和媒体查询

您还可以使用变体修饰符来定位媒体查询,例如响应式断点、暗模式、首选减少运动等。例如, 使用 md:hyphens-auto 来应用 hyphens-auto 程序,适用于中等屏幕尺寸及以上。

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

进一步了解,请参考 响应式设计, 暗黑模式 媒体查询.