CSS3 Text
CSS3 enthält mehrere neue Textfunktionen.
In diesem Kapitel werden Sie über die folgenden Texteigenschaften erfahren:
-
text-overflow -
word-wrap -
word-break
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Eigenschaft vollständig unterstützt.
Zahlen, gefolgt von -o- geben Sie die erste Version, die mit einem Präfix gearbeitet.
| Eigentum | |||||
|---|---|---|---|---|---|
| text-overflow | 4.0 | 6.0 | 7.0 | 3.1 | 11.0 9.0 -o- |
| word-wrap | 23.0 | 5.5 | 3.5 | 6.1 | 12.1 |
| word-break | 4.0 | 5.5 | 15.0 | 3.1 | 15.0 |
CSS3 Textüberlauf
Die CSS3 text-overflow - Eigenschaft gibt an, wie übergelaufenen Inhalte , die nicht angezeigt wird , sollte dem Benutzer signalisiert werden.
Es kann befestigt werden:
Dies ist einige lange Text, der nicht in die Box passen
oder es kann als ein Auslassungszeichen (...) wiedergegeben werden:
Dies ist einige lange Text, der nicht in die Box passen
Der CSS-Code ist wie folgt:
Beispiel
p.test1 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}
p.test2 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
} Versuch es selber " Das folgende Beispiel zeigt, wie Sie den übergelaufenen Inhalt anzeigen kann, wenn sie über dem Element schwebt:
CSS3 Wort Wrapping
Die CSS3 word-wrap - Eigenschaft ermöglicht lange Wörter , gebrochen zu werden zu können und wickeln Sie in der nächsten Zeile.
Wenn ein Wort in einem Raum passen zu lang ist, dehnt es sich außerhalb:
Dieser Absatz enthält eine sehr lange Wort: thisisaveryveryveryveryveryverylongword . Das lange Wort bricht und in die nächste Zeile umgebrochen.
Das Wort-wrap-Eigenschaft können Sie den Text zu zwingen, zu wickeln - auch wenn es bedeutet Spaltung in der Mitte eines Wortes:
Dieser Absatz enthält eine sehr lange Wort: thisisaveryveryveryveryveryverylongword . Das lange Wort bricht und in die nächste Zeile umgebrochen.
Der CSS-Code ist wie folgt:
Beispiel
Lassen Sie lange Wörter der Lage sein, um gebrochen zu werden und wickeln Sie in der nächsten Zeile:
p {
word-wrap: break-word;
}
Versuch es selber " CSS3 Wort brechend
Die CSS3 word-break - Eigenschaft gibt Zeile Regeln zu brechen.
Dieser Absatz enthält einen Text. Diese Linie wird-Break-at-Bindestriche.
Dieser Absatz enthält einen Text. Die Linien werden in jedem Charakter brechen.
Der CSS-Code ist wie folgt:
Testen Sie sich mit Übungen!
Eigenschaften CSS3 Text
Die folgende Tabelle listet die neuen CSS3 Text Eigenschaften:
| Eigentum | Beschreibung |
|---|---|
| text-align-last | Gibt an, wie die letzte Zeile eines Textes auszurichten |
| text-emphasis | Eine Stenografie für die Einstellung Text-Emphasis-Stil und Text-Emphasis-Farbe in einer Erklärung |
| text-justify | Gibt an, wie gerechtfertigt Text sollte ausgerichtet und mit Abstand werden |
| text-overflow | Gibt an, wie übergelaufen Inhalt, der nicht angezeigt wird dem Benutzer signalisiert werden soll |
| word-break | Gibt Linie brechen Regeln für Nicht-CJK-Skripten |
| word-wrap | Ermöglicht lange Wörter zu können gebrochen werden und wickeln Sie in der nächsten Zeile |