Lzh on GitHub

hyphens

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

快速参考

类别样式
hyphens-nonehyphens: none;
hyphens-manualhyphens: manual;
hyphens-autohyphens: 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. 

<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 工具允许浏览器根据语言自动选择断字点：

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>

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

响应式设计

在 hyphens 工具前加上像 md: 这样的断点变体，以便只在中等屏幕尺寸及以上应用该工具：

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

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