|
|
| Zeile 1: |
Zeile 1: |
| '''Zeilenwechsel''' mit '''HTML''' und '''CSS''' steuern
| |
|
| |
|
| == Beschreibung ==
| |
| ; Zeilenwechsel, Bindestriche, Leerzeichen
| |
| * verhindern
| |
| * erzwingen
| |
| ; mit
| |
| * HTML
| |
| * CSS
| |
|
| |
| ; Zeilenumbruch an ungünstiger Stelle
| |
| * 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.
| |
|
| |
| ; Manueller HTML Zeilenumbrüche oder Leerzeilen
| |
| * 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.
| |
| * 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
| |
| * zusammenhängenden Titeln,
| |
| * markanten Überschriften,
| |
| * Trennungen von Namen oder
| |
| * Wörtern mit Bindestrichen.
| |
|
| |
| == 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
| |
|
| |
| <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 '''white-space: nowrap;''' lässt sich ein HTML Zeilenumbruch via [http://www.graphic-home.de/design-wissen/design-lexikon/#css CSS] verhindern.
| |
| * 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, 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:CSS]]
| |
| [[Kategorie:IT-Grundlagen]]
| |