HTML: Zeilenumbruch bei Bindestrich verhindern

Browser und Content-Management-Systeme umbrechen meist nicht nur bei Leerzeichen, sondern auch bei Bindestrichen. Das ist nicht immer erwünscht. Wie verhindern Sie es im Einzelfall?

von Gaby Salvisberg 02.08.2017

Die Rede war nicht von einem «1-Franken-August-Feuerwerk», wie der unglückliche Umbruch es zunächst suggeriert... Die Rede war nicht von einem «1-Franken-August-Feuerwerk», wie der unglückliche Umbruch es zunächst suggeriert... © pctipp.ch

Wie schon im Artikel zu den bedingten Trennstrichen erwähnt, ist es normalerweise zwecklos, in HTML bzw. in einem Content Management System Dinge wie Silbentrennungen und Zeilenumbrüche beeinflussen zu wollen.

Aber was, wenn ein Zeilenumbruch nach einem bestimmten Bindestrich zu Missverständnissen führen kann? Gerade in Titeln oder Anrissen sieht das oft etwas seltsam aus. Im für den Artikel verwendeten Teaserbild (siehe links) sehen Sie ein Beispiel. Hier hat es den Umbruch im Wort «1.-August-Feuerwerk» direkt nach dem Bindestrich durchgeführt. Wegen des «1.-» am Zeilenende sah dies auf den ersten Blick fast wie ein «'Ein Franken'-August-Feuerwerk» aus.

Lösung: Sie kennen in HTML vielleicht schon den Non-Breaking Space (HTML-Code: «& nbsp;» (ohne das Leerzeichen). Das ist ein Leerzeichen, welches zwei Wörter zusammenhält. Wenn die beiden Wörter am Ende einer Zeile nicht mehr Platz haben, erfolgt der Zeilenumbruch beim letzten normalen Leerzeichen vor dem ersten Wort. Es werden also beim Zeilenumbruch beide Wörter auf die neue Zeile geschoben.

Im Falle des Bindestriches gibt es so etwas auch. Es nennt sich «Non-Breaking Hyphen». 

So gehts: Wechseln Sie im Editor Ihres CMS in den HTML-Modus. Ersetzen Sie den betroffenen Bindestrich bzw. das Minuszeichen durch den HTML-Code «‑». Wechseln Sie zurück zur Wysiwyg- bzw. Standardanzeige des Editors. Das Zeichen sieht nach wie vor wie ein Bindestrich aus. Speichern Sie und laden Sie die gerenderte Webseite in einem separaten Browserfenster neu. Sie sehen, dass nun das gesamte Wort, das den geschützten Bindestrich enthält, auf die neue Zeile umbrochen wird.

Nachtrag aufgrund eines Leserhinweises: Das Non-Breaking Hyphen ist im folgenden Begriff drin, da können Sie es rauskopieren: abc‑def

Tipp: Und was, wenn Ihr CMS im betroffenen Feld (z.B. im Titel) gar keinen HTML-Modus hat, in den Sie wechseln könnten? Tippen Sie das Wort einfach zunächst in ein Editor-Feld, das einen solchen Modus bietet. Wechseln Sie in den HTML-Modus, ersetzen Sie den betroffenen Bindestrich durchs Non-Breaking Hyphen und wechseln Sie zurück in den Standardmodus. Kopieren Sie nun das Wort inkl. geschütztem Bindestrich und fügen Sie es mit Ctrl+V an der gewünschten Stelle ein. Jetzt sollte das Zeichen mitkommen.