WordPress hyphenation – create “predetermined breaking points”

In WordPress and on HTML pages, hyphenation is an often underestimated feature that can significantly improve the readability of texts. Here I’ll show you some methods for using hyphenation effectively:

Hyphenation with CSS: hyphens

Unbelievable, but true: CSS already supports hyphenation! The property hyphens can be used with the values “none”, “manual” and “auto”. In everyday life, auto is usually used, as the browser automatically separates the words.

body {
hyphens: auto;
}

Important: For this to work, the lang attribute must be set in the HTML tag so that the browser knows in which language it should separate.

body(lang:de) {...}

Soft separators: ­

You can insert a soft hyphen into words with ­ to separate them when space is limited.

Example:

Stellen­angebote

In the case of a soft hyphen, a hyphen appears at the separation point.

Word separation without hyphen: <wbr>

With the <wbr> tag (Word Break Opportunity), you can set an optional hyphen within a word without a hyphen appearing.

Example:

Nahrungsmittel<wbr>unverträglichkeit

Protected spaces prevent separations: &nbsp;

The protected space (&nbsp;), also known as non-breaking space, prevents separation in unwanted places.

Example:

Eric&nbsp;Fischer

This space ensures that words such as “Eric Fischer” always remain together.

I hope these tips will help you to make your WordPress pages even more professional. Many of these techniques were of great help to me!

Hyphenation with the Divi theme

The Divi theme for WordPress also offers the option of adding CSS rules for hyphenation. By using the CSS property hyphens: auto; in specific classes, you can specifically control where hyphenation should be applied.

In the example below, hyphenation is activated for all H4 headings within the blurb modules. This can be particularly useful to improve readability in headings, which are often prone to unwanted word overflow due to their size or layout.

h4.et_pb_blurb {
hyphens: auto;
}
.et_pb_blurb_container .et_pb_module_header{
hyphens: auto;}

These rules can either be set globally for the entire theme to ensure a uniform display on all pages, or they can be applied specifically to individual elements or pages. The application to individual elements offers flexibility, especially if different sections of the website have different layout requirements.

Inserting these CSS rules in Divi is typically done via the Theme Customizer or by adding a custom CSS module to the page or layout in question. This ensures seamless integration and a consistent design across the entire website.

This method helps to improve the typographical quality of your content and optimize readability on devices with different screen sizes.

Dieser Beitrag ist auch verfügbar auf: Deutsch (German)

Was this article helpful?
Yes No

Related Articles

Leave A Comment?