HTML/Zeilenumbruch: Unterschied zwischen den Versionen

Aus Foxwiki
Zeile 10: Zeile 10:
== Non-Breaking Hyphen (HTML) ==
== Non-Breaking Hyphen (HTML) ==
; Geschützter Bindestrich
; Geschützter Bindestrich
* non breaking dash
non breaking dash
<syntaxhighlight lang="bash" line>
<syntaxhighlight lang="bash" line>
&#8209;
&#8209;

Version vom 1. Oktober 2024, 08:05 Uhr

Zeilenwechsel mit HTML und CSS steuern

Non-Breaking Space (HTML)

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 (HTML)

Geschützter Bindestrich

non breaking dash

&#8209;

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 ds Bindestriches ein.
  • Das Wort wird nun nicht mehr getrennt im Browser angezeigt.

Die Methode erzwingt eine zusammenhängende Darstellung.

 Eine&#8209;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>

White Space Property (CSS)

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.

Langer Text ohne Zeilenumbruch

Leerzeichen mit Mediaquery (CSS):

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.

Wenn es mal doch zu lang sein sollte

Wörter mit vielen Bindestrichen haben manchmal die Eigenschaft, dass sie etwas über das Ziel hinausgehen.

  • Das betrifft insbesondere schmalere Spalten im Layout.
  • In diesem Falle lässt sich mit der Silbentrennung genau der gegenteilige Effekt bewirken: Wörter werden beliebig oft und sogar mittendrin getrennt, sodass es wieder passt.

Hierzu legt man zunächst die Sprache in der HTML-Datei fest:

<html lang="de">

Und dann folgt die automatische Silbentrennung, mit der der HTML Zeilenumbruch erstellt werden:

p {
   -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto; 
}

Syntax

Parameter

Optionen

Konfiguration

Dateien

Anwendungen

Dokumentation

RFC

Man-Pages

Info-Pages

Siehe auch

Links

Projekt

Weblinks