Beim Erstellen von Layouts stellen sich Webmaster regelmäßig die Frage: Wie wird der Text übertragen? In den meisten Fällen erledigt der Browser diese Aufgabe selbstständig. Aber manchmal muss dieser Prozess unter Kontrolle gebracht werden, insbesondere bei der Formalisierung lange Worte und Phrasen, die bei falscher Übersetzung ihre Bedeutung verlieren.
Zeilenumbruch-Eigenschaft
In HTML gibt es ein spezielles Tag zum Trennen von Zeilen
. Aber seine zu häufige Verwendung gilt unter Entwicklern als schlechtes Benehmen und weist oft auf Unprofessionalität hin. Stellen Sie sich als Beweis vor, Sie haben ein Logo und möchten, dass jeder Buchstabe in einer neuen Zeile beginnt:
Das Ergebnis ist umständlicher und hässlicher Code, der bei jedem Entwickler einen Kulturschock auslöst. Und was ist zu tun, wenn das Logo auf der Desktop-Version horizontal und bei einer Bildschirmbreite von weniger als 550 Pixeln vertikal positioniert werden soll? Verwenden Sie daher immer Cascading Style Sheets, um das Erscheinungsbild von Elementen anzupassen. Vor allem mit Hilfe von Werkzeugen CSS-Übertragung Die Verwendung von Saiten erfolgt auf elegantere Weise. In diesem Fall gibt es kein redundantes Markup, was nur die Seitenladegeschwindigkeit verringert.
Die erste Eigenschaft, auf die Sie für die Textverarbeitung zugreifen sollten, ist der Zeilenumbruch. Akzeptiert drei Werte: Normal, Break-All und Keep-All. Um zu arbeiten, müssen Sie sich nur an Break-All erinnern. „Normal“ ist die Standardeinstellung und es macht keinen Sinn, sie anzugeben. Alles behalten bedeutet drin CSS-Dokument Verbot von Zeilenumbrüchen. Speziell für chinesische, japanische und koreanische Schriftzeichen entwickelt. Wenn Sie also nicht in einer dieser Sprachen bloggen, ist die Eigenschaft für Sie nicht von Nutzen. Und es wird auch nicht unterstützt Safari-Browser Und Mobiltelefone basierend auf iOS.
Zuordnen des Logos aus dem vorherigen Beispiel mit mit CSS Um jeden Buchstaben in eine neue Zeile zu verschieben, müssen Sie den folgenden Code schreiben:
P( Schriftart: fett 30px Helvetica, serifenlos; Breite: 25px; Zeilenumbruch: Break-All; )
Die Breite und Größe der Schriftart ist so gewählt, dass nur ein Buchstabe Platz findet. Zeilenumbruch mit dem Wert „break-all“ weist den Browser an, das Wort jedes Mal in eine neue Zeile umzubrechen. Diese Eigenschaft kann nicht als unersetzlich bezeichnet werden. Es ist jedoch nützlich, wenn Sie kleine Textblöcke entwerfen, beispielsweise Felder zur Eingabe von Kommentaren.
Leerraumeigenschaft
Ein häufiger Fehler, den neue Webentwickler machen, besteht darin, Text mit Leerzeichen oder Eingabetasten zu bearbeiten und sich dann zu fragen, warum ihre Bemühungen nicht auf der Seite angezeigt werden. Egal wie oft Sie die Eingabetaste drücken, der Browser ignoriert es. Es gibt jedoch eine Möglichkeit, den Text unter Berücksichtigung aller Abstände so anzuzeigen, wie Sie es möchten.
In einem CSS-Dokument können mithilfe der Eigenschaft „Leerraum“ zugewiesene Zeilenumbrüche so konfiguriert werden, dass sie Leerzeichen oder Eingabetastenanschläge berücksichtigen. Leerzeichen mit dem Wert „pre-line“ zwingen den Browser dazu, „Enter“ im Text zu sehen.
Wenn Sie in Ihrem CSS-Code pre-line in pre-wrap ändern, berücksichtigt der Zeilenumbruch Leerzeichen. Und umgekehrt verhindern Sie jegliche Umbrüche, indem Sie dem Text eine Leerraumeigenschaft mit dem Wert nowrap zuweisen:
#wrapper p( Farbe: #FFF; Abstand: 10 Pixel; Schriftart: Fett 16 Pixel Helvetica, serifenlos; Leerzeichen: Nowrap; )
Textüberlauf
Ein weiteres nützliches Tool zum Arbeiten mit Text ist Text-Overflow. Zusätzlich zu Zeilenumbrüchen können Sie mit der CSS-Eigenschaft Inhalte kürzen, wenn der Container voll ist. Nimmt zwei Werte an:
- Clip – schneidet einfach den Text ab;
- Auslassungspunkte – fügt Auslassungspunkte hinzu.
Damit die Eigenschaft funktioniert, muss das Element außerdem so eingestellt werden, dass Zeilenumbrüche und Überläufe bei ausgeblendetem Wert verhindert werden.
Brief Information
CSS-Versionen
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Beschreibung
Die Eigenschaft „white-space“ gibt an, wie Leerzeichen zwischen Wörtern angezeigt werden. IN normale Bedingungen Beliebig viele Leerzeichen im HTML-Code werden auf einer Webseite als eins angezeigt. Die Ausnahme ist das Tag
In diesem Container platzierter Text wird mit allen Leerzeichen so ausgegeben, wie er vom Benutzer formatiert wurde. Leerzeichen imitieren also die Funktionsweise des TagsIm Gegensatz dazu wird die Schriftart jedoch nicht in Monospace geändert.Syntax
Leerzeichen: normal | nowrap | vor | Vorlinie | Vorverpackung | erben
Werte
normal Der Text im Browserfenster wird wie gewohnt angezeigt, Zeilenumbrüche werden automatisch gesetzt. nowrap Leerzeichen werden nicht berücksichtigt, Zeilenumbrüche im HTML-Code werden ignoriert, der gesamte Text wird in einer Zeile angezeigt; gleichzeitig ein Tag hinzufügen
bricht den Text in eine neue Zeile um. pre Der Text wird unter Berücksichtigung aller Leerzeichen und Bindestriche angezeigt, wie sie vom Entwickler im HTML-Code hinzugefügt wurden. Wenn die Zeile zu lang ist und nicht in das Browserfenster passt, wird eine horizontale Bildlaufleiste hinzugefügt. Leerzeichen vor der Zeile werden im Text nicht berücksichtigt; der Text wird automatisch in die nächste Zeile verschoben, wenn er nicht in den angegebenen Bereich passt. Vorumbruch Alle Leerzeichen und Umbrüche bleiben im Text erhalten, aber wenn die Breite der Zeile nicht in den angegebenen Bereich passt, wird der Text automatisch in die nächste Zeile umgebrochen. inherit Erbt den Wert des übergeordneten Elements.Die Auswirkung von Werten auf den Text ist in der Tabelle dargestellt. 1.
HTML5 CSS2.1 IE Cr Op Sa Fx
Leerraum Beispiel
Fermats letzter Satz
X N+Y N= Z N
wobei n eine ganze Zahl > 2 ist
Das Ergebnis dieses Beispiels ist in Abb. dargestellt. 1.
Reis. 1. Anwenden der Leerraumeigenschaft
Objektmodell
document.getElementById("elementID").style.whiteSpace
Browser
Browser Internet Explorer Bis einschließlich Version 7.0 werden die Werte pre-line, pre-wrap und inherit nicht unterstützt. Für