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.


Gefällt dir mein Blog? Dann würde ich mich über eine kurze Bewertung bei Google freuen. Einfach hier kurz etwas hinterlassen – das wäre toll, danke!

6 Kommentare

  1. LeMerlot sagt:

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

    • Jens Kleinholz sagt:

      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. Marcel sagt:

    Auf jeden Fall sind diese kleinen Tipps in "Nischenthemen" hilfreich, ich habe auch grad wieder was gelernt – vielen Dank!

  3. g-S sagt:

    super! solche tips ersparen stundelanges Probieren und Suchen.
    Vielen Dank dafür

Schreibe einen Kommentar

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