HTML/Zeilenumbruch: Unterschied zwischen den Versionen
| Zeile 59: | Zeile 59: | ||
=== Leerzeichen mit Mediaquery === | === Leerzeichen mit Mediaquery === | ||
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: | 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: | ||
<syntaxhighlight lang="css" highlight="1" line> | |||
p br { display: none; } | p br { display: none; } | ||
@media (min-width: 1200px) { | @media (min-width: 1200px) { | ||
p br { display: inline-block; } | p br { display: inline-block; } | ||
} | } | ||
</syntaxhighlight> | |||
Durch den Code werden der HTML Zeilenumbruch zunächst ausgeblendet. | Durch den Code werden der HTML Zeilenumbruch zunächst ausgeblendet. | ||
Version vom 19. Oktober 2024, 09:57 Uhr
Zeilenwechsel mit HTML und CSS steuern
HTML
Non-Breaking Space
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
- 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 des 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>
CSS
White Space Property
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.
<span style="white-space: nowrap;">Langer Text ohne Zeilenumbruch</span>
Leerzeichen mit Mediaquery
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.