HTML/Zeilenumbruch: Unterschied zwischen den Versionen
Keine Bearbeitungszusammenfassung |
Keine Bearbeitungszusammenfassung |
||
Zeile 1: | Zeile 1: | ||
'''Zeilenwechsel''' mit '''HTML''' und '''CSS''' steuern | '''Zeilenwechsel''' mit '''HTML''' und '''CSS''' steuern | ||
Version vom 29. Dezember 2022, 12:24 Uhr
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";
}
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; }
Syntax
Parameter
Optionen
Konfiguration
Dateien
Anwendungen
Dokumentation
RFC
Man-Pages
Info-Pages
Siehe auch
Links
Projekt-Homepage
Weblinks
Einzelnachweise
Testfragen
Testfrage 1
Testfrage 2
Testfrage 3
Testfrage 4
Testfrage 5