HTML/Zeilenumbruch: Unterschied zwischen den Versionen
Zeile 9: | Zeile 9: | ||
== Non-Breaking Hyphen (HTML) == | == Non-Breaking Hyphen (HTML) == | ||
; non breaking dash | ; Geschützter Bindestrich | ||
Bei einem Wort mit Bindestrich, das am Ende der Zeile steht, würde ebenfalls eine Trennung erfolgen | * non breaking dash | ||
* Abhilfe schafft hier das Zeichen ''' | <syntaxhighlight lang="bash" line> | ||
‑ | |||
</syntaxhighlight> | |||
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. | * Das Wort wird nun nicht mehr getrennt im Browser angezeigt. | ||
Die Methode erzwingt eine zusammenhängende Darstellung. | Die Methode erzwingt eine zusammenhängende Darstellung. | ||
<syntaxhighlight lang="bash" line> | |||
Eine‑Kombination | Eine‑Kombination | ||
</syntaxhighlight> | |||
<syntaxhighlight lang="bash" line> | |||
<nowiki> Non-Breaking Hyphen</nowiki> | <nowiki> Non-Breaking Hyphen</nowiki> | ||
<nowiki> ‑</nowiki> | <nowiki> ‑</nowiki> | ||
Zeile 30: | Zeile 39: | ||
<nowiki> content: "\2011";</nowiki> | <nowiki> content: "\2011";</nowiki> | ||
<nowiki> }</nowiki> | <nowiki> }</nowiki> | ||
</syntaxhighlight> | |||
== White Space Property (CSS) == | == White Space Property (CSS) == |
Version vom 1. Oktober 2024, 08:04 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
‑
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‑Kombination
<nowiki> Non-Breaking Hyphen</nowiki>
<nowiki> ‑</nowiki>
<nowiki> UNICODEU+02011</nowiki>
<nowiki> HEX CODE‑</nowiki>
<nowiki> HTML CODE‑</nowiki>
<nowiki> HTML ENTITY—</nowiki>
<nowiki> CSS CODE\2011</nowiki>
<nowiki> // html example</nowiki>
<nowiki> <span>‑</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; }