HTML/Zeilenumbruch: Unterschied zwischen den Versionen
K Textersetzung - „line>“ durch „line copy>“ |
|||
| (9 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
'''Zeilenwechsel | '''HTML/Zeilenumbruch - Zeilenwechsel mit [[HTML]] und [[CSS]] steuern | ||
== Beschreibung == | |||
== HTML == | == HTML == | ||
=== Non-Breaking Space === | === Non-Breaking Space === | ||
| Zeile 9: | Zeile 10: | ||
Der Abstand der Wörter zueinander ist durch das geschützte Leerzeichen fest. | Der Abstand der Wörter zueinander ist durch das geschützte Leerzeichen fest. | ||
Wort1 Wort2 | Wort1 Wort2 | ||
== CSS == | == CSS == | ||
=== White Space Property === | === White Space Property === | ||
Mit dem White Space Property lässt sich ein HTML Zeilenumbruch via [ | Mit dem White Space Property lässt sich ein HTML Zeilenumbruch via [https://www.graphic-home.de/design-wissen/design-lexikon/#css CSS] verhindern | ||
<syntaxhighlight lang="css" highlight="1" line> | <syntaxhighlight lang="css" highlight="1" line copy> | ||
white-space: nowrap; | white-space: nowrap; | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| Zeile 52: | Zeile 20: | ||
Die Textstellen, die nicht umgebrochen werden, können zum Beispiel mit dem Tag '''span''' eingegrenzt werden. | Die Textstellen, die nicht umgebrochen werden, können zum Beispiel mit dem Tag '''span''' eingegrenzt werden. | ||
<syntaxhighlight lang="html" highlight="1" line> | <syntaxhighlight lang="html" highlight="1" line copy> | ||
<span style="white-space: nowrap;">Langer Text ohne Zeilenumbruch</span> | <span style="white-space: nowrap;">Langer Text ohne Zeilenumbruch</span> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| Zeile 58: | Zeile 26: | ||
=== 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> | <syntaxhighlight lang="css" highlight="1" line copy> | ||
p br { display: none; } | p br { display: none; } | ||
| Zeile 68: | Zeile 36: | ||
Durch den Code werden der HTML Zeilenumbruch zunächst ausgeblendet. | 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. | * Erst ab einer bestimmten Breite (in diesem Fall: 1200px) wird er durch CSS-Angaben sichtbar gemacht. | ||
<noinclude> | |||
== Anhang == | |||
=== Siehe auch === | |||
{{Special:PrefixIndex/{{BASEPAGENAME}}/}} | |||
=== Links === | |||
==== Weblinks ==== | |||
[[Kategorie:HTML]] | [[Kategorie:HTML]] | ||
</noinclude> | |||
Aktuelle Version vom 11. Mai 2025, 13:46 Uhr
HTML/Zeilenumbruch - Zeilenwechsel mit HTML und CSS steuern
Beschreibung
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
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.
Anhang
Siehe auch
Links
Weblinks