In WordPress
WordPress does more than 38.8% of all websites on the internet. Yes - more than one in four websites you visit is likely powered by WordPress. • WordPress.org , often as self-hosted WordPress is the free open source WordPress software that you can install on your own web host to create a 100% custom website.• WordPress.com is a for-profit, paid... 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 CSSCSS ( Cascading style sheets ) means “multi-level format templates” in German. CSS is a formatting language for HTML, SVG and XML documents. CSS is used to separate the content of a website from the design! There is more information here .: hyphens
Unbelievable, but true: CSSCSS ( Cascading style sheets ) means “multi-level format templates” in German. CSS is a formatting language for HTML, SVG and XML documents. CSS is used to separate the content of a website from the design! There is more information here . 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:
The protected space ( ), also known as non-breaking space, prevents separation in unwanted places.
Example:
Eric Fischer
This space ensures that words such as “Eric Fischer” always remain together.
I hope these tips will help you to make your WordPressWordPress does more than 38.8% of all websites on the internet. Yes - more than one in four websites you visit is likely powered by WordPress. • WordPress.org , often as self-hosted WordPress is the free open source WordPress software that you can install on your own web host to create a 100% custom website.• WordPress.com is a for-profit, paid... pages even more professional. Many of these techniques were of great help to me!
Hyphenation with the Divi theme
The Divi theme
Divi is a WordPress theme and has great features. With this theme you hardly need any additional plugins in WordPress! Official website of Divi for WordPressWordPress does more than 38.8% of all websites on the internet. Yes - more than one in four websites you visit is likely powered by WordPress. • WordPress.org , often as self-hosted WordPress is the free open source WordPress software that you can install on your own web host to create a 100% custom website.• WordPress.com is a for-profit, paid... also offers the option of adding CSSCSS ( Cascading style sheets ) means “multi-level format templates” in German. CSS is a formatting language for HTML, SVG and XML documents. CSS is used to separate the content of a website from the design! There is more information here . rules for hyphenation. By using the CSSCSS ( Cascading style sheets ) means “multi-level format templates” in German. CSS is a formatting language for HTML, SVG and XML documents. CSS is used to separate the content of a website from the design! There is more information here . 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 CSSCSS ( Cascading style sheets ) means “multi-level format templates” in German. CSS is a formatting language for HTML, SVG and XML documents. CSS is used to separate the content of a website from the design! There is more information here . rules in DiviDivi is a WordPress theme and has great features. With this theme you hardly need any additional plugins in WordPress! Official website of Divi is typically done via the Theme Customizer or by adding a custom CSSCSS ( Cascading style sheets ) means “multi-level format templates” in German. CSS is a formatting language for HTML, SVG and XML documents. CSS is used to separate the content of a website from the design! There is more information here . 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)
Skip to content