hyphens

用于控制单词如何断字的工具类。

快速参考

类	属性
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.

<!-- [!code classes:hyphens-none] -->
<!-- [!code word:&shy;] -->
<!-- prettier-ignore -->
<p class="hyphens-none">
  ... Kraftfahrzeug&shy;haftpflichtversicherung is a ...
</p>

手动断字

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

<!-- [!code classes:hyphens-manual] -->
<!-- [!code word:&shy;] -->
<!-- prettier-ignore -->
<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.

<!-- [!code classes:hyphens-auto] -->
<!-- [!code word:lang="de"] -->
<!-- prettier-ignore -->
<p class="hyphens-auto" lang="de">
  ... Kraftfahrzeughaftpflichtversicherung is a ...
</p>

换行建议 ­ 会优先于自动断字点。

响应式设计

使用 md: 等断点变体作为 hyphens 工具类的前缀，即可只在中等屏幕尺寸及以上应用该工具类：

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

更多关于变体的用法，请参阅变体文档。