CSS -Texteffekte
CSS-Textüberlauf , Zeilenumbruch, Zeilenumbruchregeln und Schreibmodi
In diesem Kapitel lernen Sie folgende Eigenschaften kennen:
text-overflowword-wrapword-breakwriting-mode
CSS-Textüberlauf
Die CSS- text-overflowEigenschaft legt fest, wie überlaufende Inhalte, die nicht angezeigt werden, dem Benutzer signalisiert werden sollen.
Es kann geklippt werden:
Dies ist ein langer Text, der nicht in das Feld passt
oder es kann als Ellipse (...) gerendert werden:
Dies ist ein langer Text, der nicht in das Feld passt
Der CSS-Code lautet 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;
}
Das folgende Beispiel zeigt, wie Sie den übergelaufenen Inhalt anzeigen können, wenn Sie mit der Maus über das Element fahren:
Beispiel
div.test:hover {
overflow: visible;
}
CSS-Wortumbruch
Die CSS word-wrap-Eigenschaft ermöglicht es, lange Wörter zu unterbrechen und in die nächste Zeile umzubrechen.
Wenn ein Wort zu lang ist, um in einen Bereich zu passen, wird es nach außen erweitert:
Dieser Absatz enthält ein sehr langes Wort: Dies ist ein sehr sehr sehr sehr sehr langes Wort. Das lange Wort wird umgebrochen und in die nächste Zeile umgebrochen.
Mit der Eigenschaft Zeilenumbruch können Sie den Textumbruch erzwingen – selbst wenn dies bedeutet, dass er mitten im Wort geteilt wird:
Dieser Absatz enthält ein sehr langes Wort: Dies ist ein sehr sehr sehr sehr sehr langes Wort. Das lange Wort wird umgebrochen und in die nächste Zeile umgebrochen.
Der CSS-Code lautet wie folgt:
Beispiel
Lassen Sie zu, dass lange Wörter gebrochen und in die nächste Zeile umbrochen werden können:
p {
word-wrap: break-word;
}
CSS-Wörtertrennung
Die CSS word-break-Eigenschaft gibt Zeilenumbruchregeln an.
Dieser Absatz enthält Text. Diese Zeile wird bei Bindestrichen unterbrochen.
Dieser Absatz enthält Text. Die Zeilen brechen bei jedem Zeichen.
Der CSS-Code lautet wie folgt:
Beispiel
p.test1 {
word-break:
keep-all;
}
p.test2 {
word-break:
break-all;
}
CSS-Schreibmodus
Die CSS writing-mode-Eigenschaft gibt an, ob Textzeilen horizontal oder vertikal angeordnet werden.
Einige Texte mit einem span-Element mit a vertikal-rl Schreibmodus.
Das folgende Beispiel zeigt einige verschiedene Schreibmodi:
Beispiel
p.test1 {
writing-mode: horizontal-tb;
}
span.test2 {
writing-mode: vertical-rl;
}
p.test2 {
writing-mode:
vertical-rl;
}
Eigenschaften von CSS-Texteffekten
Die folgende Tabelle listet die CSS-Texteffekteigenschaften auf:
| Property | Description |
|---|---|
| text-justify | Specifies how justified text should be aligned and spaced |
| text-overflow | Specifies how overflowed content that is not displayed should be signaled to the user |
| word-break | Specifies line breaking rules for non-CJK scripts |
| word-wrap | Allows long words to be able to be broken and wrap onto the next line |
| writing-mode | Specifies whether lines of text are laid out horizontally or vertically |