ContextQMD
Back to Tailwindcss

Hyphens

src/docs/hyphens.mdx

latest3.1 KB
Original Source

import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx";

export const title = "hyphens"; export const description = "Utilities for controlling how words should be hyphenated.";

<ApiTable rows={[ ["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 &shy; is used:

<Figure> <Example padding={false}> { <p className="mx-auto max-w-xs border-x border-x-pink-400/30 py-8 break-normal hyphens-none text-gray-900 dark:text-gray-200"> Officially recognized by the Duden dictionary as the longest word in German,{" "} <span className="font-bold" lang="de"> Kraftfahrzeug&shy;haftpflichtversicherung </span>{" "} is a 36 letter word for motor vehicle liability insurance. </p> } </Example>
html
<!-- [!code classes:hyphens-none] -->
<!-- [!code word:&shy;] -->
<!-- prettier-ignore -->
<p class="hyphens-none">
  ... Kraftfahrzeug&shy;haftpflichtversicherung is a ...
</p>
</Figure>

Manual hyphenation

Use the hyphens-manual utility to only set hyphenation points where the line break suggestion &shy; is used:

<Figure> <Example padding={false}> { <p className="mx-auto max-w-xs border-x border-x-pink-400/30 py-8 break-normal hyphens-manual text-gray-900 dark:text-gray-200"> Officially recognized by the Duden dictionary as the longest word in German,{" "} <span className="font-bold" lang="de"> Kraftfahrzeug&shy;haftpflichtversicherung </span>{" "} is a 36 letter word for motor vehicle liability insurance. </p> } </Example>
html
<!-- [!code classes:hyphens-manual] -->
<!-- [!code word:&shy;] -->
<!-- prettier-ignore -->
<p class="hyphens-manual">
  ... Kraftfahrzeug&shy;haftpflichtversicherung is a ...
</p>
</Figure>

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:

<Figure> <Example padding={false}> { <p className="mx-auto max-w-xs border-x border-x-pink-400/30 py-8 break-normal hyphens-auto text-gray-900 dark:text-gray-200"> Officially recognized by the Duden dictionary as the longest word in German,{" "} <span className="font-bold" lang="de"> Kraftfahrzeughaftpflichtversicherung </span>{" "} is a 36 letter word for motor vehicle liability insurance. </p> } </Example>
html
<!-- [!code classes:hyphens-auto] -->
<!-- [!code word:lang="de"] -->
<!-- prettier-ignore -->
<p class="hyphens-auto" lang="de">
  ... Kraftfahrzeughaftpflichtversicherung is a ...
</p>
</Figure>

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

Responsive design

<ResponsiveDesign element="p" property="hyphens" defaultClass="hyphens-none" featuredClass="hyphens-auto" />