HTML/Zeilenumbruch: Unterschied zwischen den Versionen

Aus Foxwiki
Versionsgeschichte interaktiv durchsuchen
← Zum vorherigen Versionsunterschied
VisuellWikitext
 
(39 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
=== Non-Breaking Space ===
* Bindestriche
Das geschützte Leerzeichen hält zwei Wörter zusammen und sorgt für Abstand.
* Leerzeichen  
* 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


* verhindern
=== Non-Breaking Hyphen ===
* erzwingen
; Geschützter Bindestrich
non breaking dash
<syntaxhighlight lang="bash">
&#8209;
</syntaxhighlight>


* HTML
Bei einem Wort mit Bindestrich, das am Ende der Zeile steht, würde ebenfalls eine Trennung erfolgen
* CSS
* Abhilfe schafft hier das Zeichen <syntaxhighlight lang="bash">&#8209;</syntaxhighlight>
* Dieses setzt man anstelle des Bindestriches ein.
* Das Wort wird nun nicht mehr getrennt im Browser angezeigt.


Manchmal befindet sich der HTML Zeilenumbruch an einer Stelle, die nicht sinnvoll erscheint.
Die Methode erzwingt eine zusammenhängende Darstellung.
* Der Umbruch geschieht auch häufig vor Bindestrichen.
* Der Rest des Wortes rutscht somit in die nächste Zeile.
* Der Absatz sorgt für Verwirrung beim Lesen.


Von der Grundidee her ist das Setzen manueller HTML Zeilenumbrüche oder Leerzeilen – vor allem, wenn es um moderne Webseiten angeht – etwas, das man eher vergessen sollte.
<syntaxhighlight lang="bash" line>
* Denn schließlich möchte man ja, dass sich der Text je nach Breite des Displays anpasst.
Eine&#8209;Kombination
</syntaxhighlight>


Es gibt allerdings Situationen, in denen ein manuelles Verhindern oder Erzwingen der Zeilenumbrüche durchaus Sinn machen kann – zum Beispiel bei
; Non-Breaking Hyphen (-)
* zusammenhängenden Titeln,
<syntaxhighlight lang="bash" line>
* markanten Überschriften,
UNICODEU+02011
* Trennungen von Namen oder
HEX CODE&#x2011;
* Wörtern mit Bindestrichen.
HTML CODE&#8209;
HTML ENTITY—
CSS CODE\2011
</syntaxhighlight>


== Non-Breaking Space (HTML) ==
; HTML Beispiel
Das geschützte Leerzeichen hält zwei Wörter zusammen und sorgt für Abstand.
<syntaxhighlight lang="bash" line>
* Den Umbruch erzwingt man mit dieser Methode nach dem zweiten Wort.
<span>&#8209;</span>
* Bei einem HTML Zeilenumbruch werden beide Wörter in die neue Zeile geschoben.  
</syntaxhighlight>
* Der Abstand der Wörter zueinander ist durch das geschützte Leerzeichen fest.
 
Wort1&nbsp;Wort2
; CSS-Beispiel
<syntaxhighlight lang="bash" line>
span {
  content: "\2011";
}
</syntaxhighlight>
 
== CSS ==
=== 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
<syntaxhighlight lang="css" highlight="1" line>
white-space: nowrap;
</syntaxhighlight>


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


== 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“