In WordPress
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 add a soft hyphen with ­ into words 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 at undesired points.
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 WordPress
Hyphenation with the Divi theme
The Divi theme
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 Divi
This method helps to improve the typographical quality of your content and optimize readability on devices with different screen sizes.
Global application
If you have the property hyphens:auto; for every text on your website, then insert the following code into 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 . of your website:
p, h1, h2, h3, h4, h5, h6 {
hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
}
What this code does:
- p, h1, h2, h3, h4, h5, h6:
- This rule applies to all paragraphs (
<p>) and headings (<h1>to<h6>).
- This rule applies to all paragraphs (
- hyphens: auto;
- This property activates automatic hyphenation so that the browser itself decides where words can be hyphenated at the end of a line. This improves the readability of the text.
- -webkit-hyphens: auto;
- This line ensures that automatic hyphenation also works in WebKit-based browsers such as Safari and older versions of Chrome.
- -ms-hyphens: auto;
- This line ensures that automatic hyphenation also works in Internet Explorer.
By adding this code, you ensure that long words in paragraphs and headings are automatically separated, making the text more evenly distributed and easier to read.
Dieser Beitrag ist auch verfügbar auf:
Deutsch (German)
Leave A Comment?