Zum Inhalt springen

HTML/Zeilenumbruch: Unterschied zwischen den Versionen

Aus Foxwiki
Keine Bearbeitungszusammenfassung
 
(3 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
'''Zeilenwechsel''' mit HTML und CSS steuern
'''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
=== Non-Breaking Hyphen ===
; Geschützter Bindestrich
non breaking dash
<syntaxhighlight lang="bash">
&#8209;
</syntaxhighlight>
Bei einem Wort mit Bindestrich, das am Ende der Zeile steht, würde ebenfalls eine Trennung erfolgen
* Abhilfe schafft hier das Zeichen <syntaxhighlight lang="bash">&#8209;</syntaxhighlight>
* Dieses setzt man anstelle des Bindestriches ein.
* Das Wort wird nun nicht mehr getrennt im Browser angezeigt.
Die Methode erzwingt eine zusammenhängende Darstellung.
<syntaxhighlight lang="bash" line>
Eine&#8209;Kombination
</syntaxhighlight>
; Non-Breaking Hyphen (-)
<syntaxhighlight lang="bash" line>
UNICODEU+02011
HEX CODE&#x2011;
HTML CODE&#8209;
HTML ENTITY—
CSS CODE\2011
</syntaxhighlight>
; HTML Beispiel
<syntaxhighlight lang="bash" line>
<span>&#8209;</span>
</syntaxhighlight>
; CSS-Beispiel
<syntaxhighlight lang="bash" line>
span {
  content: "\2011";
}
</syntaxhighlight>


== CSS ==
== CSS ==
Zeile 74: 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 7. März 2025, 11:59 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