1. 排版
  2. 连字符

排版

连字符

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

类名样式
hyphens-none
hyphens: none;
hyphens-manual
hyphens: manual;
hyphens-auto
hyphens: auto;

示例

防止断字

使用 hyphens-none 实用程序来防止单词被断字,即使使用了换行建议 ­

被杜登词典正式认可为德语中最长的单词, Kraftfahrzeug­haftpflichtversicherung 是一个 36 个字母的单词,意思是机动车责任保险。

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

手动断字

使用 hyphens-manual 实用程序仅在使用了换行建议 &shy; 的地方设置断字点

被杜登词典正式认可为德语中最长的单词, Kraftfahrzeug­haftpflichtversicherung 是一个 36 个字母的单词,意思是机动车责任保险。

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

这是浏览器的默认行为。

自动断字

使用 hyphens-auto 实用程序允许浏览器根据语言自动选择断字点

被杜登词典正式认可为德语中最长的单词, Kraftfahrzeughaftpflichtversicherung 是一个 36 个字母的单词,意思是机动车责任保险。

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

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

响应式设计

前缀a hyphens 实用工具 与断点变体(如 md: )结合使用,仅在以下情况下应用该实用工具medium 屏幕尺寸及以上

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

了解更多关于在 variants 文档中使用变体的信息。

版权所有 © 2025 Tailwind Labs Inc.·商标政策