hyphens.mdx

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 ­ 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.

}

<!-- [!code classes:hyphens-none] -->
<!-- [!code word:&shy;] -->
<!-- prettier-ignore -->
<p class="hyphens-none">
  ... Kraftfahrzeug&shy;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,{" "} Kraftfahrzeug­haftpflichtversicherung {" "} is a 36 letter word for motor vehicle liability insurance.

}

<!-- [!code classes:hyphens-manual] -->
<!-- [!code word:&shy;] -->
<!-- prettier-ignore -->
<p class="hyphens-manual">
  ... Kraftfahrzeug&shy;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.

}

<!-- [!code classes:hyphens-auto] -->
<!-- [!code word:lang="de"] -->
<!-- prettier-ignore -->
<p class="hyphens-auto" lang="de">
  ... Kraftfahrzeughaftpflichtversicherung is a ...
</p>

The line break suggestion ­ will be preferred over automatic hyphenation points.

Responsive design