CSS -teksoorloop- eienskap
Voorbeeld
Gebruik van die teks-oorloop-eienskap:
div
{
white-space: nowrap;
overflow:
hidden;
text-overflow: ellipsis;
}
Meer "Probeer dit self" voorbeelde hieronder.
Definisie en gebruik
Die text-overflow
eienskap spesifiseer hoe oorvol inhoud wat nie vertoon word nie aan die gebruiker gesein moet word. Dit kan geknip word, 'n ellips vertoon (...), of 'n pasgemaakte string vertoon.
Albei die volgende eienskappe word vereis vir teks-oorloop:
- wit-spasie: nowrap;
- oorloop: verborge;
Standaard waarde: | knip |
---|---|
Geërf: | geen |
Animateerbaar: | geen. Lees oor animeerbaar |
Weergawe: | CSS3 |
JavaScript-sintaksis: | voorwerp .style.textOverflow="ellipsis" |
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die eiendom ten volle ondersteun.
Nommers gevolg deur -o- spesifiseer die eerste weergawe wat met 'n voorvoegsel gewerk het.
Property | |||||
---|---|---|---|---|---|
text-overflow | 4.0 | 6.0 | 7.0 | 3.1 | 11.0 9.0 -o- |
CSS-sintaksis
text-overflow: clip|ellipsis|string|initial|inherit;
Eiendomswaardes
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 voorbeelde
Voorbeeld
Teks-oorloop met 'n sweef-effek (wys hele teks op sweef):
div.a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div.a:hover {
overflow: visible;
}
Verwante bladsye
CSS-tutoriaal: CSS-tekseffekte
HTML DOM verwysing: textOverflow eiendom