HTML/Zeilenumbruch: Unterschied zwischen den Versionen
| Zeile 10: | Zeile 10: | ||
== Non-Breaking Hyphen (HTML) == | == Non-Breaking Hyphen (HTML) == | ||
; Geschützter Bindestrich | ; Geschützter Bindestrich | ||
non breaking dash | |||
<syntaxhighlight lang="bash" line> | <syntaxhighlight lang="bash" line> | ||
‑ | ‑ | ||
Version vom 1. Oktober 2024, 08:05 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)
- Geschützter Bindestrich
non breaking dash
‑
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
<nowiki> Non-Breaking Hyphen</nowiki>
<nowiki> ‑</nowiki>
<nowiki> UNICODEU+02011</nowiki>
<nowiki> HEX CODE‑</nowiki>
<nowiki> HTML CODE‑</nowiki>
<nowiki> HTML ENTITY—</nowiki>
<nowiki> CSS CODE\2011</nowiki>
<nowiki> // html example</nowiki>
<nowiki> <span>‑</span></nowiki>
<nowiki> // css example</nowiki>
<nowiki> span {</nowiki>
<nowiki> content: "\2011";</nowiki>
<nowiki> }</nowiki>
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;
}