1. 排版
  2. 连字符

排版

连字符

控制单词如何分割的工具性类名。

ClassStyles
hyphens-none
hyphens: none;
hyphens-manual
hyphens: manual;
hyphens-auto
hyphens: auto;

示例

防止分割

使用 hyphens-none 工具类可以防止单词被分割,即便使用了换行建议 ­

官方认定为德语中最长的单词, Kraftfahrzeug­haftpflichtversicherung 是一个36个字母的关于机动车责任保险的术语。

<p class="hyphens-none">  ... Kraftfahrzeug&shy;haftpflichtversicherung 是一个 ...</p>

手动分割

使用 hyphens-manual 工具类仅在使用换行建议 &shy; 的地方设置分割点:

官方认定为德语中最长的单词, Kraftfahrzeug­haftpflichtversicherung 是一个36个字母的关于机动车责任保险的术语。

<p class="hyphens-manual">  ... Kraftfahrzeug&shy;haftpflichtversicherung 是一个 ...</p>

这是浏览器的默认行为。

自动分割

使用 hyphens-auto 工具类允许浏览器根据语言自动选择分割点:

官方认定为德语中最长的单词, Kraftfahrzeughaftpflichtversicherung 是一个36个字母的关于机动车责任保险的术语。

<p class="hyphens-auto" lang="de">  ... Kraftfahrzeughaftpflichtversicherung 是一个 ...</p>

换行建议 &shy; 会优先于自动分割点。

响应式设计

Prefix a hyphens utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

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

Learn more about using variants in the variants documentation.