CSS text-overflow eigenschap
Voorbeeld
Gebruik van de eigenschap text-overflow:
div
{
white-space: nowrap;
overflow:
hidden;
text-overflow: ellipsis;
}
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De text-overflow
eigenschap specificeert hoe overvolle inhoud die niet wordt weergegeven, moet worden gesignaleerd aan de gebruiker. Het kan worden afgekapt, een ellips weergeven (...) of een aangepaste tekenreeks weergeven.
Beide van de volgende eigenschappen zijn vereist voor tekstoverloop:
- witruimte: nowrap;
- overloop verborgen;
Standaardwaarde: | klem |
---|---|
geërfd: | Nee |
Animeerbaar: | Nee. Lees over animeren |
Versie: | CSS3 |
JavaScript-syntaxis: | object .style.textOverflow="ellipsis" |
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.
Getallen gevolgd door -o- specificeren de eerste versie die met een prefix werkte.
Property | |||||
---|---|---|---|---|---|
text-overflow | 4.0 | 6.0 | 7.0 | 3.1 | 11.0 9.0 -o- |
CSS-syntaxis
text-overflow: clip|ellipsis|string|initial|inherit;
Eigendomswaarden
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 |
Meer voorbeelden
Voorbeeld
Tekstoverloop met een zweefeffect (toon volledige tekst bij zweven):
div.a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div.a:hover {
overflow: visible;
}
Gerelateerde pagina's
CSS-zelfstudie: CSS-teksteffecten
HTML DOM-referentie: eigenschap textOverflow