WordPress Tipp: Überschriften mit Silbentrennung und Soll-Bruchstellen

Silbentrennung in WordPress

Ich hatte heute bei einer Kundenwebsite den Fall, dass das Theme lange Worte in der Überschrift nicht umbrechen, wenn die Webseite in der mobilen Ansicht angeschaut wurde.

Da die Überschriften zentriert dargestellt werden, sieht man unter Umständen am iPhone nur ein Wort, bei welchem das Vorder- und das Hinterteil fehlt. Das war natürlich ein Zustand, welchen ich so nicht belassen konnte.

Mit einem einfachen HTML Tag lassen sich Soll-Trennstellen in Überschriften einrichten.
Mit einem einfachen HTML Tag lassen sich Soll-Trennstellen in Überschriften einrichten.

Silbentrennung in WordPress – die Möglichkeiten

Die Recherche nach den Möglichkeiten der Silbentrennung in WordPress und HTML-Seiten im Allgemeinen brauchte direkt mehrere Lösungsansätze zutage, welche ich euch hier vorstellen möchte:

Silbentrennung per CSS: hyphens

Man glaubt es kaum, aber auch in CSS ist die Silbentrennung schon vorgesehen. Die CSS-Eigenschaft „hyphens“ kann die Werte „none“, „manual“ oder „auto“ besitzen.

body {
hyphens: auto;
}

In der Praxis dürfte der Wert „auto“ am häufigsten eingesetzt werden, denn in diesem Fall trennt der Browser selbst die Wörter.

Achtung: Damit die Silbentrennung funktioniert, muss auch das HTML Attribut „lang“ bzw. „xml:lan“ unter XML gesetzt sein. Sonst weiß der Browser nicht, nach welcher Sprache er seinen Job erledigen soll.

Soft Hyphen: ­­

Braut man den Tag ­ in ein Wort in einer Überschrift ein, wird das Wort an dieser Stelle getrennt, wenn nicht mehr genug Platz in der Breite vorhanden ist, um das Wort komplett darzustellen.

Beispiel:

Nahrungsmittel­­unverträglichkeit

Bei dem Soft Hyphen wird bei der Trennung auch ein Trennstrich gesetzt.

Word Break: <wbr>

Baut man den Tag in einem Wort ein, so wird dieses Wort an der Stelle getrennt – falls nötig – aber es erscheint kein Trennstrich.

Beispiel:

Nahrungsmittel<wbr>unverträglichkeit

Non Breaking Space: Trennung verhindern

Einige kennen vielleicht den Begriff „geschütztes Leerzeichen“. Das ist ein Leerzeichen, welches nicht zu Trennung verwendet werden soll. Auf Webseiten erledigt dies der „Non breaking space“-Tag: &nsbp;

Wird dieser statt einem normalen Leerzeichen zwischen zwei Worte gesetzt, werden die Worte immer in einer Zeile dargestellt.

Beispiel:

Horst&nbsp;Evers

Ich hoffe, ich konnte euch mit diesem kleinen Ausflug ein paar Neuigkeiten in Bezug auf Silbentrennung in WordPress und HTML zeigen. Für mich war das jedenfalls alles Neuland – bis auf den Non Breaking Space, welchen ich schon kannte.

Meine Tipps & Tricks rund um Technik & Apple

Hat dir der Artikel gefallen und helfen dir die Anleitungen im Blog? Dann würde ich mich freuen, wenn du das Blog über eine Steady-Mitgliedschaft unterstützen würdest.

10 Kommentare zu „WordPress Tipp: Überschriften mit Silbentrennung und Soll-Bruchstellen“

  1. Super, es sind auch immer wieder solche kleinen Tipps – unglaublich hilfreich – warum ich Eure Seite so gerne und oft besuche !! Vielen Dank!

    1. Dank dir! Die Rückmeldung von dir ist auch super-hilfreich, da ich echt nicht wusste, ob es für dieses „Nischenthema“ tatsächlich Interesse gibt. :D Aber scheinbar schon… freut mich sehr!

  2. Schöne Sache…

    Ich bin in diesem Zusammenhang noch auf der Suche nach einer Möglichkeit eine Trennung bei einem Bindestrich, also „-“ zwischen zwei Wörtern zu verhindern.
    Hintergrund ist, dass unser Firmenname einen Bindestrich enthält uns es immer übel aussieht, wenn der Firmenname „zerrissen“ wird. Ähnliches gibt es auch bei Zusammenhängenden Überschriften, die ich gerne mit Bindestrich aber eben unzerissen dargestellt hätte…

    Hast Du da eine Idee…?
    vlf. Oliver

    1. Ich glaube, in diesem Fall musst du mi CSS arbeiten und „hyphens: none“ oder „hyphens: manual“ in dem Paragraph oder um das Wort setzen.

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Im Sir Apfelot Blog findest du Ratgeber, Anleitungen und Testberichte zu Apple Produkten wie iPhone, iPad, Apple Watch, AirPods, iMac, Mac Pro, Mac Mini und Mac Studio.

Specials
Shopping
  •  
  •  

Meine Tipps & Tricks rund um Technik & Apple