WordPress Silbentrennung – „Sollbruchstellen“ erzeugen

In WordPress WordPress macht mehr als 38.8% aller Websites im Internet aus. Ja – mehr als jede vierte Website, die du besuchst, wird wahrscheinlich von WordPress betrieben. • WordPress.org, oft als selbst-gehostetes WordPress bezeichnet, ist die kostenlose Open-Source-WordPress-Software, die du auf deinem eigenen Webhoster installieren kannst, um eine zu 100% eigene Website zu erstellen.• WordPress.com ist ein gewinnorientierter, kostenpflichtiger Dienst, der von der WordPress.org-Software betrieben wird. Es ist einfach... mehr erfahren und auf HTML-Seiten ist das Thema Silbentrennung ein oft unterschätztes Feature, das die Lesbarkeit von Texten erheblich verbessern kann. Hier zeige ich dir einige Methoden, wie du Silbentrennung effektiv nutzen kannst:

Silbentrennung mit CSSCSS (Cascading Style Sheets) heißt auf deutsch „Mehrstufige Formatvorlagen“. CSS ist eine Formatierungssprache für HTML-, SVG- und XML-Dokumente. Genutzt wird CSS um den Inhalt einer Webseite vom Design zu trennen! Weitere Infos dazu gibt es hier. mehr erfahren: hyphens

Unglaublich, aber wahr: CSSCSS (Cascading Style Sheets) heißt auf deutsch „Mehrstufige Formatvorlagen“. CSS ist eine Formatierungssprache für HTML-, SVG- und XML-Dokumente. Genutzt wird CSS um den Inhalt einer Webseite vom Design zu trennen! Weitere Infos dazu gibt es hier. mehr erfahren unterstützt bereits die Silbentrennung! Die Eigenschaft hyphens lässt sich mit den Werten „none“, „manual“ und „auto“ verwenden. Im Alltag wird meist auto genutzt, da hierbei der Browser selbstständig die Wörter trennt.

Wichtig: Damit das funktioniert, muss das lang Attribut im HTML-Tag gesetzt sein, damit der Browser weiß, in welcher Sprache er trennen soll.

body(lang:de) {...}

Weiche Trennzeichen: ­

Ein weiches Trennzeichen (Soft Hyphen) fügst du mit ­ in Wörter ein, um sie bei Raumknappheit zu trennen.

Beispiel:

Bei einem Soft Hyphen erscheint an der Trennstelle ein Bindestrich.

Worttrennung ohne Trennstrich: <wbr>

Mit dem <wbr> Tag (Word Break Opportunity) kannst du einen optionalen Trennpunkt innerhalb eines Wortes setzen, ohne dass ein Bindestrich erscheint.

Beispiel:

Geschützte Leerzeichen verhindern Trennungen:  

Das geschützte Leerzeichen ( ), auch Non-Breaking Space genannt, verhindert die Trennung an ungewünschten Stellen.

Beispiel:

Dieses Leerzeichen sorgt dafür, dass Worte wie „Eric Fischer“ stets zusammenbleiben.

Ich hoffe, diese Tipps helfen dir dabei, deine WordPress-Seiten noch professioneller zu gestalten. Für mich waren viele dieser Techniken von großer Hilfe!

Silbentrennung mit dem Divi-Theme

Das Divi-Theme Divi ist ein WordPress Theme und besticht durch tolle Features. Mit diesem Theme braucht ihr in WordPress fast keine zusätzlichen Plugins mehr! Offizielle Webseite von Divi mehr erfahren für WordPress WordPress macht mehr als 38.8% aller Websites im Internet aus. Ja – mehr als jede vierte Website, die du besuchst, wird wahrscheinlich von WordPress betrieben. • WordPress.org, oft als selbst-gehostetes WordPress bezeichnet, ist die kostenlose Open-Source-WordPress-Software, die du auf deinem eigenen Webhoster installieren kannst, um eine zu 100% eigene Website zu erstellen.• WordPress.com ist ein gewinnorientierter, kostenpflichtiger Dienst, der von der WordPress.org-Software betrieben wird. Es ist einfach... mehr erfahren bietet ebenfalls die Möglichkeit, CSS-Regeln zur Silbentrennung hinzuzufügen. Durch die Verwendung der CSS-Eigenschaft hyphens: auto; in spezifischen Klassen kannst du gezielt steuern, wo Silbentrennungen vorgenommen werden sollen.

Im Beispiel unten wird die Silbentrennung auf alle H4-Überschriften innerhalb der Blurb-Module aktiviert. Dies kann besonders nützlich sein, um die Lesbarkeit in Überschriften zu verbessern, die aufgrund ihrer Größe oder des Layouts oft zu unerwünschten Wortüberläufen neigen.

Diese Regeln können entweder global für das gesamte Theme eingestellt werden, um eine einheitliche Darstellung auf allen Seiten zu gewährleisten, oder gezielt auf einzelne Elemente oder Seiten angewendet werden. Die Anwendung auf individuelle Elemente bietet Flexibilität, insbesondere wenn unterschiedliche Abschnitte der Website unterschiedliche Layout-Anforderungen haben.

Das Einfügen dieser CSS-Regeln in Divi Divi ist ein WordPress Theme und besticht durch tolle Features. Mit diesem Theme braucht ihr in WordPress fast keine zusätzlichen Plugins mehr! Offizielle Webseite von Divi mehr erfahren erfolgt typischerweise über das Theme Customizer oder durch das Hinzufügen eines benutzerdefinierten CSS-Moduls auf der betreffenden Seite oder dem Layout. Dadurch wird eine nahtlose Integration und ein konsistentes Design über die gesamte Website hinweg sichergestellt.

Diese Methode hilft, die typografische Qualität deiner Inhalte zu verbessern und die Lesbarkeit auf Geräten mit verschiedenen Bildschirmgrößen zu optimieren.

Dieser Beitrag ist auch verfügbar auf: English (Englisch)