HTML Zeilenumbruch im Text verhindern oder erzwingen
In HTML erscheint ein Zeilenumbruch nicht immer dort, wo man es möchte. Mit diesen Tipps lassen sich Zeilenwechsel mit HTML und CSS verhindern und Bindestriche und Leerzeichen erzwingen.
Tipps für HTML Zeilenumbruch und CSS Zeilenumbruch
Responsive Design schön und gut – doch manchmal befindet sich der HTML Zeilenumbruch an einer Stelle, die nicht sinnvoll erscheint. Der Umbruch geschieht auch häufig vor Bindestrichen. Der Rest des Wortes rutscht somit in die nächste Zeile. Der Absatz sorgt für Verwirrung beim Lesen.
Von der Grundidee her ist das Setzen manueller HTML Zeilenumbrüche oder Leerzeilen – vor allem, wenn es um moderne Webseiten angeht – etwas, das man eher vergessen sollte. Denn schließlich möchte man ja, dass sich der Text je nach Breite des Displays anpasst.
Es gibt allerdings Situationen, in denen ein manuelles Verhindern oder Erzwingen der Zeilenumbrüche durchaus Sinn machen kann – zum Beispiel bei
- zusammenhängenden Titeln,
- markanten Überschriften,
- Trennungen von Namen oder
- Wörtern mit Bindestrichen.
Non-Breaking Space (HTML)
Das geschützte Leerzeichen hält zwei Wörter zusammen und sorgt für Abstand. Den Umbruch erzwingt man mit dieser Methode nach dem zweiten Wort. Bei einem HTML Zeilenumbruch werden beide Wörter in die neue Zeile geschoben. Der Abstand der Wörter zueinander ist durch das geschützte Leerzeichen fest.
Wort1 Wort2
Non-Breaking Hyphen (HTML)
Bei einem Wort mit Bindestrich, das am Ende der Zeile steht, würde ebenfalls eine Trennung erfolgen. Abhilfe schafft hier das Zeichen ‑ Dieses setzt man anstelle des Bindestriches ein. Das Wort wird nun nicht mehr getrennt im Browser angezeigt. Die Methode erzwingt eine zusammenhängende Darstellung.
Eine Versuchs‑Kombination
White Space Property (CSS)
Mit dem White Space Property white-space: nowrap; lässt sich ein HTML Zeilenumbruch via CSS verhindern. Die Textstellen, die nicht umgebrochen werden, können zum Beispiel mit dem Tag span eingegrenzt werden.
<span style="white-space: nowrap;">Langer Text ohne Zeilenumbruch</span>
Zeilenumbrüche mit Mediaquery (CSS):
Möchte man Zeilenumbrüche setzen, die zum Beispiel in der Desktop-Ansicht sichtbar werden sollen, jedoch bei mobilen Geräten oder kleinerer Display-Auflösung nicht erwünscht sind, kann man wie folgt vorgehen:
p br { display: none; }
@media (min-width: 1200px) {
p br { display: inline-block; }
}
Durch den Code sind die Zeilenumbrüche im Absatz zunächst ausgeblendet. Erst ab einer bestimmten Breite (in diesem Fall: 1200px) werden sie durch die entsprechenden CSS-Angaben sichtbar gemacht.
Wenn es mal doch zu lang sein sollte …
Wörter mit vielen Bindestrichen haben manchmal die Eigenschaft, dass sie etwas über das Ziel hinausgehen. Das betrifft insbesondere schmalere Spalten im Layout. In diesem Falle lässt sich mit der Silbentrennung genau der gegenteilige Effekt bewirken: Wörter werden beliebig oft und sogar mittendrin getrennt, so dass es wieder passt.
Hierzu legt man zunächst die Sprache in der HTML-Datei fest:
<html lang="de">
Und dann folgt die automatische Silbentrennung, mit der der HTML Zeilenumbruch erstellt werden:
p {
-moz-hyphens: auto;
-o-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
Ich hatte nach einer Möglichkeit gesucht, dass am Bindestrich nicht automatisch ein Zeilenumbruch vom Browser erzeugt werden soll, in meinem speziellen Fall das Wort E-Mail. Mit dem oben genannten Zeichen für Non-Breaking Hyphen klappt das wunderbar, und man kann das eben je nach Bedarf im HTML-Quelltext einsetzen.
Aber auch die anderen Formatierungsmöglichkeiten, die beschrieben werden, gefallen mir gut, insbesondere das Media-Query, mit dem man bestimmen kann, dass ein gesetzter Zeilenumbruch je nach Display-Breite angezeigt werden soll oder nicht.
Dabei ist mir ein kleiner Schreibfehler aufgefallen: »bei mobilenen Geräten« müsste »bei mobilen Geräten« heißen. 😉
Danke für den Hinweis. Ist geändert worden.
Auch ich bedanke mich für die tollen und äußerst nützlichen Infos!! Habe aber auch einen kleinen Tippfehler gefunden: „Dieses setzt man anstelle ds Bindestriches“ – ich spendiere ein „e“.
Als sinnige Ergänzung für diese Seite möchte ich noch bzw. beisteuern, das eine optionale Trennfuge erzeugt ohne(!) dass im Fall der Trennung am Zeilenende ein Trennzeichen eingefügt wird; das ist äußerst hilfreich bei sehr langen Nomenklatur-Namen z.B. in der Chemie notwendig. Hier ein partielles Beispiel: „(1R,3S,3′S,6R,8S,10R,12S,16R,18R,19R,20S,22R,25S,27R,29Z,32S,34R,36S,38R,40S,42R,43S,44S,45R,47S,48S,49S,50R,52S,54R,56R,58S,59R)-16-[(E,3S)-3,4-Dihydroxybut-1-enyl]-43,44,49,54,58-pentamethylspiro…“. Waagerechte Scrollbars auf Webseiten sehen i.d.R. ja recht unschön aus.
„Möchte man Leerzeichen setzen“
„Durch den Code sind die Leerzeichen im Absatz zunächst ausgeblendet“
Leerzeichen -> Zeilenumbruch
p br …