HTML/Zeilenumbruch: Unterschied zwischen den Versionen

Aus Foxwiki
Versionsgeschichte interaktiv durchsuchen
← Zum vorherigen Versionsunterschied
VisuellWikitext
 
(34 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
'''Zeilenwechsel''' mit '''HTML''' und '''CSS''' steuern
'''Zeilenwechsel''' mit HTML und CSS steuern


== Beschreibung ==
== HTML ==
; Zeilenwechsel, Bindestriche, Leerzeichen  
=== Non-Breaking Space ===
* verhindern
Das geschützte Leerzeichen hält zwei Wörter zusammen und sorgt für Abstand.
* erzwingen
* Den Umbruch erzwingt man mit dieser Methode nach dem zweiten Wort.
; mit
* Bei einem HTML Zeilenumbruch werden beide Wörter in die neue Zeile geschoben.
* HTML
 
* CSS
Der Abstand der Wörter zueinander ist durch das geschützte Leerzeichen fest.
Wort1 Wort2


; Zeilenumbruch an ungünstiger Stelle
=== Non-Breaking Hyphen ===
* Der Umbruch geschieht auch häufig vor Bindestrichen.
; Geschützter Bindestrich
* Der Rest des Wortes rutscht somit in die nächste Zeile.
non breaking dash
* Der Absatz sorgt für Verwirrung beim Lesen.
<syntaxhighlight lang="bash">
&#8209;
</syntaxhighlight>


; Manueller HTML Zeilenumbrüche oder Leerzeilen
Bei einem Wort mit Bindestrich, das am Ende der Zeile steht, würde ebenfalls eine Trennung erfolgen
* Von der Grundidee her ist das Setzen manueller HTML Zeilenumbrüche oder Leerzeilen
* Abhilfe schafft hier das Zeichen <syntaxhighlight lang="bash">&#8209;</syntaxhighlight>
* vor allem, wenn es um moderne Webseiten angeht
* Dieses setzt man anstelle des Bindestriches ein.  
* etwas, das man eher vergessen sollte.  
* Das Wort wird nun nicht mehr getrennt im Browser angezeigt.  
* Denn schließlich möchte man ja, dass sich der Text je nach Breite des Displays anpasst.


Es gibt allerdings Situationen, in denen ein manuelles Verhindern oder Erzwingen der Zeilenumbrüche durchaus Sinn machen kann
Die Methode erzwingt eine zusammenhängende Darstellung.
* zusammenhängenden Titeln,
* markanten Überschriften,
* Trennungen von Namen oder
* Wörtern mit Bindestrichen.


== Non-Breaking Space (HTML) ==
<syntaxhighlight lang="bash" line>
Das geschützte Leerzeichen hält zwei Wörter zusammen und sorgt für Abstand.
Eine&#8209;Kombination
* Den Umbruch erzwingt man mit dieser Methode nach dem zweiten Wort.
</syntaxhighlight>
* 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.
; Non-Breaking Hyphen (-)
Wort1&nbsp;Wort2
<syntaxhighlight lang="bash" line>
UNICODEU+02011
HEX CODE&#x2011;
HTML CODE&#8209;
HTML ENTITY—
CSS CODE\2011
</syntaxhighlight>
 
; HTML Beispiel
<syntaxhighlight lang="bash" line>
<span>&#8209;</span>
</syntaxhighlight>


== Non-Breaking Hyphen (HTML) ==
; CSS-Beispiel
Bei einem Wort mit Bindestrich, das am Ende der Zeile steht, würde ebenfalls eine Trennung erfolgen.
<syntaxhighlight lang="bash" line>
* Abhilfe schafft hier das Zeichen '''&#8209;''' Dieses setzt man anstelle ds Bindestriches ein.
span {
* Das Wort wird nun nicht mehr getrennt im Browser angezeigt.
  content: "\2011";
* Die Methode erzwingt eine zusammenhängende Darstellung.
}
Eine&#8209;Kombination
</syntaxhighlight>


<nowiki>
== CSS ==
Non-Breaking Hyphen
=== White Space Property ===
‑
Mit dem White Space Property lässt sich ein HTML Zeilenumbruch via [http://www.graphic-home.de/design-wissen/design-lexikon/#css CSS] verhindern
UNICODEU+02011
<syntaxhighlight lang="css" highlight="1" line>
HEX CODE&#x2011;
white-space: nowrap;
HTML CODE&#8209;
</syntaxhighlight>
HTML ENTITY—
CSS CODE\2011
// html example
<span>&#8209;</span>


// css example
span {
  content: "\2011";
}
</nowiki>


== White Space Property (CSS) ==
Die Textstellen, die nicht umgebrochen werden, können zum Beispiel mit dem Tag '''span''' eingegrenzt werden.
Mit dem White Space Property '''white-space: nowrap;''' lässt sich ein HTML Zeilenumbruch via [http://www.graphic-home.de/design-wissen/design-lexikon/#css CSS] verhindern.
<syntaxhighlight lang="html" highlight="1" line>
* 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>
<span style="white-space: nowrap;">Langer Text ohne Zeilenumbruch</span>
</syntaxhighlight>


== Leerzeichen mit Mediaquery (CSS): ==
=== 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:
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:
<syntaxhighlight lang="css" highlight="1" line>
  p br { display: none; }
  p br { display: none; }
 
  @media (min-width: 1200px) {
  @media (min-width: 1200px) {
         p br { display: inline-block; }
         p br { display: inline-block; }
         }
         }
</syntaxhighlight>


Durch den Code werden der HTML Zeilenumbruch zunächst ausgeblendet.  
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.
* 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, so dass 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]]
[[Kategorie:HTML]]
[[Kategorie:CSS]]

Aktuelle Version vom 20. Oktober 2024, 08:16 Uhr

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 

&#8209;

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

Die Methode erzwingt eine zusammenhängende Darstellung. 

Eine&#8209;Kombination
Non-Breaking Hyphen (-)
UNICODEU+02011
HEX CODE&#x2011;
HTML CODE&#8209;
HTML ENTITY—
CSS CODE\2011
HTML Beispiel
<span>&#8209;</span>
CSS-Beispiel
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.
Abgerufen von „https://wiki.foxtom.de/index.php?title=HTML/Zeilenumbruch&oldid=111914“