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

Non-Breaking Hyphen (-)

UNICODEU+02011
HEX CODE‑
HTML CODE‑
HTML ENTITY—
CSS CODE\2011
// html example
<span>&#8209;</span>
// css example
span {
  content: "\2011";
}

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.