1. 排版
  2. hyphens

排版

hyphens

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

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

示例(Examples)

¥Examples

防止连字符(Preventing hyphenation)

¥Preventing hyphenation

使用 hyphens-none 工具防止单词被连字符连接,即使使用了换行建议 ­

¥Use the hyphens-none utility 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 hyphenation)

¥Manual hyphenation

使用 hyphens-manual 工具仅在使用换行符建议 &shy; 的地方设置连字符点:

¥Use the hyphens-manual utility 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>

这是默认的浏览器行为。

¥This is the default browser behavior.

自动连字符(Automatic hyphenation)

¥Automatic hyphenation

使用 hyphens-auto 工具允许浏览器根据语言自动选择连字符点:

¥Use the hyphens-auto utility to allow the browser to automatically choose hyphenation points based on the language:

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; 优先于自动断字点。

¥The line break suggestion &shy; will be preferred over automatic hyphenation points.

响应式设计(Responsive design)

¥Responsive design

hyphens 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具:

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

请参阅 变体文档 详细了解如何使用变体。

TailwindCSS v4.0 中文网 - 粤ICP备13048890号