Hyphens

Utilities to control hyphenation.

Class Properties
.hyphens-none hyphens: none;
.hyphens-manual hyphens: manual;
.hyphens-auto hyphens: auto;

Usage

Change the hyphenation with the .hyphens-{property} utilities. If you want to control it manually you have to add ‐ or ­ in the paragraph.

No hyphenation (standard)

Dies ist ein Typoblindtexttestversuch. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Finanzdienstleistungsunternehmen, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog.

Manual hyphenation

Dies ist ein Typoblindtext‐testversuch. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Finanzdienstleistungs­unternehmen, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog.

Automatic hyphenation

Dies ist ein Typoblindtexttestversuch. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Finanzdienstleistungsunternehmen, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog.

Responsive

To change the hyphenation at a specific breakpoint, add @{breakpoint} add the end of the utility. This is especially useful when you want to enable hyphenation on mobile devices but disable it on desktop devices.

Automatic hyphenation on mobile, no hyphenation on desktop

Dies ist ein Typoblindtexttestversuch. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Finanzdienstleistungsunternehmen, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog.

Variants

By default, only responsive variants are generated for this utility. You can control which variants are generated by modifying the $utility-configuration in _settings.scss.