Typography
hyphens
Utilities for controlling how words should be hyphenated.
| Class | Styles |
|---|---|
hyphens-none | hyphens: none; |
hyphens-manual | hyphens: manual; |
hyphens-auto | hyphens: auto; |
Examples
Preventing hyphenation
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, Kraftfahrzeughaftpflichtversicherung is a 36 letter word for motor vehicle liability insurance.
<p class="hyphens-none"> ... Kraftfahrzeug­haftpflichtversicherung is a ...</p>Manual hyphenation
Use the hyphens-manual utility to only set hyphenation points where the line break suggestion ­ is used:
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-manual"> ... Kraftfahrzeug­haftpflichtversicherung is a ...</p>This is the default browser behavior.
Automatic hyphenation
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>The line break suggestion ­ will be preferred over automatic hyphenation points.
Responsive design
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 ..."> <!-- ... --></p>Learn more about using variants in the variants documentation.
Tailwind CSS 中文网（本网站）的目标是为中文开发者提供准确、及时的 Tailwind CSS 中文文档
Tailwind CSS 中文文档由本网站维护人员共同翻译，采用 MIT 开源协议发布
本网站与 tailwindcss.com 及 Tailwind Labs Inc. 并无从属关系
Tailwind 商标由 Tailwind Labs Inc. 所有
京ICP备15031610号-8