Version vom 29. Dezember 2022, 12:20 Uhr

TMP

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)

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

 Non-Breaking Hyphen

‑

 UNICODEU+02011

 HEX CODE‑

 HTML CODE‑

 HTML ENTITY—

 CSS CODE\2011

 // html example

 <span>‑</span>

 // css example

 span {

   content: "\2011";

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-Homepage

Weblinks

Einzelnachweise

Testfragen

Testfrage 1

Antwort1

Testfrage 2

Antwort2

Testfrage 3

Antwort3

Testfrage 4

Antwort4

Testfrage 5

Antwort5

@@ Zeile 1: / Zeile 1: @@
+= TMP =
+'''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) ==
+Bei einem Wort mit Bindestrich, das am Ende der Zeile steht, würde ebenfalls eine Trennung erfolgen.
+* Abhilfe schafft hier das Zeichen '''&#8209;''' 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 [http://www.graphic-home.de/design-wissen/design-lexikon/#css 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 (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-Homepage ===
+=== Weblinks ===
+=== Einzelnachweise ===
+<references />
+== Testfragen ==
+<div class="toccolours mw-collapsible mw-collapsed">
+''Testfrage 1''
+<div class="mw-collapsible-content">'''Antwort1'''</div>
+</div>
+<div class="toccolours mw-collapsible mw-collapsed">
+''Testfrage 2''
+<div class="mw-collapsible-content">'''Antwort2'''</div>
+</div>
+<div class="toccolours mw-collapsible mw-collapsed">
+''Testfrage 3''
+<div class="mw-collapsible-content">'''Antwort3'''</div>
+</div>
+<div class="toccolours mw-collapsible mw-collapsed">
+''Testfrage 4''
+<div class="mw-collapsible-content">'''Antwort4'''</div>
+</div>
+<div class="toccolours mw-collapsible mw-collapsed">
+''Testfrage 5''
+<div class="mw-collapsible-content">'''Antwort5'''</div>
+</div>
 [[Kategorie:HTML]]