HTML/Zeilenumbruch

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&#x2011;</nowiki>
 <nowiki> HTML CODE&#8209;</nowiki>
 <nowiki> HTML ENTITY—</nowiki>
 <nowiki> CSS CODE\2011</nowiki>
 <nowiki> // html example</nowiki>
 <nowiki> <span>&#8209;</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.