HTML/Zeilenumbruch
Zeilenwechsel mit HTML und CSS steuern
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 ds Bindestriches ein.
- Das Wort wird nun nicht mehr getrennt im Browser angezeigt.
- Die Methode erzwingt eine zusammenhängende Darstellung.
Eine‑Kombination
Non-Breaking Hyphen
‑
UNICODEU+02011
HEX CODE‑
HTML CODE‑
HTML ENTITY—
CSS CODE\2011
// html example
<span>‑</span>
// css example
span {
content: "\2011";
}
UNICODEU+02011
HEX CODE‑
HTML CODE‑
HTML ENTITY—
CSS CODE\2011
// html example
‑
// css example
span {
content: "\2011";
}
White Space Property (CSS)
Mit dem White Space Property lässt sich ein HTML Zeilenumbruch via CSS verhindern
white-space: nowrap;
Die Textstellen, die nicht umgebrochen werden, können zum Beispiel mit dem Tag span eingegrenzt werden.
Langer Text ohne Zeilenumbruch
Leerzeichen mit Mediaquery (CSS):
Möchte man Leerzeichen 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 werden der HTML Zeilenumbruch zunächst ausgeblendet.
- Erst ab einer bestimmten Breite (in diesem Fall: 1200px) wird er durch 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, sodass 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;
}