|
|
| Zeile 47: |
Zeile 47: |
| <div class="mw-collapsible-content">'''Antwort5'''</div> | | <div class="mw-collapsible-content">'''Antwort5'''</div> |
| </div> | | </div> |
|
| |
| = TMP =
| |
| Zeilenwechsel mit HTML und CSS verhindern und Bindestriche und Leerzeichen erzwingen.
| |
|
| |
| == HTML Zeilenumbruch und CSS Zeilenumbruch ==
| |
| Manchmal befindet sich der HTML Zeilenumbruch an einer Stelle, die nicht sinnvoll erscheint.
| |
| * 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.
| |
| * 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 – zum Beispiel bei
| |
| * 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
| |
|
| |
| == 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;
| |
| }
| |
|
| |
| [[Kategorie:HTML]]
| |
| [[Kategorie:CSS]]
| |