CSS overflow eigenschap
- Vorige pagina outline-width
- Volgende pagina overflow-anchor
Definitie en gebruik
overflow De eigenschap definieert wat er gebeurt wanneer de inhoud van het element over de rand van het element raakt.
Uitleg
Deze eigenschap definieert hoe de inhoud van het overlopende element wordt afgehandeld. Als de waarde scroll is, zal de gebruikerstussenkomst altijd een soort schuifmechanisme bieden, zelfs als alle inhoud in het elementkader kan passen, kan er een schuifbalk verschijnen.
Zie ook:
CSS handleiding:CSS positie
HTML DOM referentiemanual:Overflow-eigenschap
Voorbeeld
Instellen van de overflow-eigenschap:
div
{
width:150px;
height:150px;
overflow:scroll;
}
CSS syntax
overflow: visible|hidden|clip|scroll|auto|initial|inherit;
Eigenschapswaarde
| Waarde | Beschrijving |
|---|---|
| zichtbaar | Standaardwaarde. De inhoud wordt niet ingekort en wordt weergegeven buiten het elementkader. |
| hidden | De inhoud wordt ingekort en het overige gedeelte is niet zichtbaar. |
| scroll | De inhoud wordt ingekort, maar de browser zal een scrollbar weergeven om het overige gedeelte te bekijken. |
| auto | Als de inhoud wordt ingekort, zal de browser een scrollbar weergeven om het overige gedeelte te bekijken. |
| inherit | Stelt dat de waarde van de overflow-eigenschap van het ouder-element moet worden overgenomen. |
Technische details
| Standaardwaarde: | zichtbaar |
|---|---|
| Inheritsiviteit: | nee |
| Versie: | CSS2 |
| JavaScript syntax: | object.style.overflow="scroll" |
Meer voorbeelden
- Hoe je een scrollbar kunt gebruiken om overtollige inhoud in elementen te tonen
- Dit voorbeeld demonstreert hoe je de overflow-eigenschap kunt instellen om de juiste actie te bepalen wanneer de inhoud van het element te groot is en de gedefinieerde gebied overschrijdt.
- Hoe je overtollige inhoud in overloopende elementen kunt verbergen
- Dit voorbeeld demonstreert hoe je de overflow-eigenschap kunt instellen om de inhoud te verbergen wanneer de inhoud van het element te groot is om in het aangegeven gebied te passen.
- Hoe je de browser kunt instellen om automatisch overloop te verwerken
- Dit voorbeeld demonstreert hoe je de browser kunt instellen om automatisch overloop te verwerken.
Browserondersteuning
De cijfers in de tabel vermelden de eerste browserversie die de eigenschap volledig ondersteunt.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
- Vorige pagina outline-width
- Volgende pagina overflow-anchor
