CSS text-overflow- Eigenschaft
Beispiel
Verwendung der text-overflow-Eigenschaft:
div
{
white-space: nowrap;
overflow:
hidden;
text-overflow: ellipsis;
}
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Die text-overflow
Eigenschaft legt fest, wie überlaufende Inhalte, die nicht angezeigt werden, dem Benutzer signalisiert werden sollen. Es kann abgeschnitten werden, Auslassungspunkte (...) anzeigen oder eine benutzerdefinierte Zeichenfolge anzeigen.
Die beiden folgenden Eigenschaften sind für Textüberlauf erforderlich:
- Leerzeichen: nowrap;
- Überlauf versteckt;
Standardwert: | Clip |
---|---|
Vererbt: | Nein |
Animierbar: | Nein. Lesen Sie mehr über animierbare |
Ausführung: | CSS3 |
JavaScript-Syntax: | Objekt .style.textOverflow="Ellipse" |
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
Zahlen gefolgt von -o- geben die erste Version an, die mit einem Präfix funktioniert hat.
Property | |||||
---|---|---|---|---|---|
text-overflow | 4.0 | 6.0 | 7.0 | 3.1 | 11.0 9.0 -o- |
CSS-Syntax
text-overflow: clip|ellipsis|string|initial|inherit;
Eigenschaftswerte
Value | Description | Play it |
---|---|---|
clip | Default value. The text is clipped and not accessible | |
ellipsis | Render an ellipsis ("...") to represent the clipped text | |
string | Render the given string to represent the clipped text | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Mehr Beispiele
Beispiel
Textüberlauf mit Hover-Effekt (ganzen Text beim Hover anzeigen):
div.a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div.a:hover {
overflow: visible;
}
Verwandte Seiten
CSS-Tutorial: CSS-Texteffekte
HTML-DOM-Referenz: textOverflow-Eigenschaft