1. 排版
  2. 连字符

Quick reference

属性
hyphens-nonehyphens: none;
hyphens-manualhyphens: manual;
hyphens-autohyphens: auto;

基本用法

¥Basic usage

¥None

使用 hyphens-none 防止单词连字符,即使使用换行建议 ­

¥Use hyphens-none to prevent words from being hyphenated even if the line break suggestion ­ is used:

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 仅在使用换行建议 &shy; 的地方设置断字点:

¥Use hyphens-manual to only set hyphenation points where the line break suggestion &shy; is used:

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

¥Use hyphens-auto to allow the browser to automatically choose hyphenation points based on the language. The line break suggestion &shy; will be preferred over automatic hyphenation points.

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>

有关所有可用状态修饰符的完整列表,请查看悬停、聚焦、以及其他状态 文档。

断点和媒体查询

你还可以使用变体修饰符来定位媒体查询,例如响应式断点、暗黑模式、首选减少运动等。例如,使用 md:hyphens-auto 仅在中等屏幕尺寸及以上时应用 hyphens-auto 工具。

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

要了解更多信息,请查看有关 响应式设计暗黑模式、以及 其他媒体查询修饰符 的文档。