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.
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 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.
Jens betreibt das Blog seit 2012. Er tritt für seine Leser als Sir Apfelot auf und hilft ihnen bei Problemen technischer Natur. Er fährt in seiner Freizeit elektrische Einräder, fotografiert (natürlich am liebsten mit dem iPhone), klettert in den hessischen Bergen rum oder wandert mit der Familie. Seine Artikel beschäftigen sich mit Apple Produkten, Neuigkeiten aus der Welt der Drohnen oder mit Lösungen für aktuelle Bugs.
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.
8 Kommentare zu „WordPress Tipp: Überschriften mit Silbentrennung und Soll-Bruchstellen“
LeMerlot
Super, es sind auch immer wieder solche kleinen Tipps – unglaublich hilfreich – warum ich Eure Seite so gerne und oft besuche !! Vielen Dank!
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!
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…
chatGPT den Zugriff auf die Inhalte der eigenen Webseite verbieten
Super, es sind auch immer wieder solche kleinen Tipps – unglaublich hilfreich – warum ich Eure Seite so gerne und oft besuche !! Vielen Dank!
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!
Auf jeden Fall sind diese kleinen Tipps in „Nischenthemen“ hilfreich, ich habe auch grad wieder was gelernt – vielen Dank!
Sehr schön! :D Danke für eure Rückmeldung.
super! solche tips ersparen stundelanges Probieren und Suchen.
Vielen Dank dafür
Wunderbar. Dann halte ich mich nicht zurück und poste gerne hin und wieder solche Kurztipps. :D
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
Ich glaube, in diesem Fall musst du mi CSS arbeiten und „hyphens: none“ oder „hyphens: manual“ in dem Paragraph oder um das Wort setzen.