De overfloweigenschap bepaalt wat er gebeurt met inhoud die buiten de grenzen valt: stel je een divvoor waarin je expliciet hebt ingesteld op 200 px breed, maar een afbeelding bevat die 300 px breed is. Die afbeelding steekt uit de div en is visiblestandaard. Als u de overflowwaarde hiddeninstelt op , wordt de afbeelding afgesneden bij 200px.
div ( overflow: visible | hidden | scroll | auto | inherit )Waarden
visible: inhoud wordt niet afgekapt wanneer deze buiten de doos verder gaat. Dit is de standaardwaarde van de eigenschaphidden: overlopende inhoud wordt verborgen.scroll: vergelijkbaar met verborgen, behalve dat gebruikers door de verborgen inhoud kunnen scrollenauto: als de inhoud buiten de doos blijft, wordt die inhoud verborgen, terwijl een schuifbalk zichtbaar moet zijn zodat gebruikers de rest van de inhoud kunnen lezen.initial: gebruikt de standaardwaarde die isvisibleinherit: stelt de overflow in op de waarde van het bovenliggende element.
Onthoud dat tekst van nature aan het einde van een element zal omlopen (tenzij witruimte wordt gewijzigd), dus tekst zal zelden de oorzaak zijn van overflow. Tenzij een hoogte is ingesteld, zal tekst ook een element groter duwen. Overflow komt vaker om de hoek kijken wanneer expliciete breedtes en hoogtes zijn ingesteld en het ongewenst zou zijn dat inhoud naar buiten komt, of wanneer scrollen expliciet wordt vermeden.
Zichtbaar
Als u de overflow-eigenschap helemaal niet instelt, is de standaardwaarde zichtbaar. Over het algemeen is er dus geen reden om deze eigenschap expliciet in te stellen op zichtbaar, tenzij u deze opheft en niet ergens anders wordt ingesteld.
Het belangrijkste om hier te onthouden is dat, hoewel de inhoud buiten de doos zichtbaar is, die inhoud de stroom van de pagina niet beïnvloedt. Bijvoorbeeld:
Over het algemeen zou je sowieso geen statische hoogtes moeten instellen op vakken met webtekst, dus het zou niet moeten verschijnen.
Verborgen
Het tegenovergestelde van de standaard zichtbare is verborgen . Dit verbergt letterlijk alle inhoud die verder gaat dan de doos.
Dit is vooral handig bij gebruik met dynamische inhoud en de mogelijkheid van een overloop die ernstige lay-outproblemen veroorzaakt. Houd er echter rekening mee dat inhoud die op deze manier verborgen is, volkomen ontoegankelijk is (afgezien van het bekijken van de bron). Dus een gebruiker heeft bijvoorbeeld zijn standaard lettergrootte groter ingesteld dan je zou verwachten, het kan zijn dat je tekst buiten een kader duwt en deze volledig voor hun zicht verbergt.
Rol
Als u de overloopwaarde van een vak instelt om te scrollen, wordt de inhoud verborgen voor weergave buiten het kader, maar biedt het schuifbalken om door de binnenkant van het vak te scrollen om de inhoud te bekijken.
Van belang bij deze waarde is dat u ZOWEL horizontale als verticale schuifbalken krijgt, wat er ook gebeurt, zelfs als de inhoud slechts de een of de ander vereist.
Het momentum-scrollen van iOS kan voor deze waarde worden ingeschakeld met -webkit-overflow-scrolling.
Opmerking: in OS X Lion, wanneer schuifbalken zijn ingesteld om alleen te tonen wanneer ze worden gebruikt, scrollgedraagt zich meer als auto, in die zin dat alleen benodigde schuifbalken verschijnen.
Auto
Auto overflow lijkt erg op de scroll-waarde, alleen lost het het probleem op van het krijgen van scrollbars wanneer je ze niet nodig hebt. De schuifbalken worden alleen weergegeven als er inhoud is die daadwerkelijk uit het element breekt.
overflow-x en overflow-y
Het is ook mogelijk om de overloop van inhoud horizontaal of verticaal te manipuleren met de overflow-xen overflow-yeigenschappen. In de onderstaande demo kan bijvoorbeeld door de horizontale overloop worden gescrolld terwijl de tekst die buiten de hoogte van de box valt verborgen is:
.box ( overflow-y: hidden; overflow-x: scroll; )Float Clearing
Een van de meer populaire toepassingen van het instellen van overloop is, vreemd genoeg, het opruimen van de vlotter. Door het instellen van een overloop wordt de vlotter bij het element niet gewist, het gaat vanzelf leeg. Dit betekent dat het element met overloop (elke waarde behalve visible) zich zo groot zal uitstrekken als nodig is om onderliggende elementen te omvatten die zwevend zijn (in plaats van samen te vouwen), ervan uitgaande dat de hoogte niet wordt gedeclareerd. Zoals dit:
Een betere techniek voor het opruimen van de vlotter is de clearfix, omdat u de overflow-eigenschap niet hoeft te wijzigen op een manier die u niet nodig hebt.
Context voor blokopmaak genereren
Het is interessant om op te merken dat overflowdit ook een nieuwe blokopmaakcontext zal creëren, wat handig is als we een blokelement naast een zwevend element willen uitlijnen. In het onderstaande voorbeeld laten we zien hoe een aantal alinea's standaard interageert met een zwevende afbeelding en vervolgens gebruiken overflow: hiddenwe om de tekst uit te lijnen in zijn eigen kader:
Dit komt uit een geweldige post van Nicole Sullivan die het media-object inspireerde.
Kunnen schuifbalken worden gestileerd met CSS?
Vroeger kon je schuifbalken opmaken in IE (v5.5?), Maar nu niet meer. U kunt ze nu weer opmaken in WebKit-browsers. Als je aangepaste schuifbalken voor meerdere browsers nodig hebt, kijk dan naar JavaScript.
Als aan een element schuifbalken moeten worden toegevoegd om de overloopwaarde te respecteren, plaatst Firefox deze buiten het element, waarbij de zichtbare breedte / hoogte behouden blijft zoals aangegeven. IE plaatst de schuifbalken erin, met behoud van de totale breedte / hoogte zoals aangegeven.
Demo
Demo's voor dit artikel afkomstig van deze voorbeeldpagina.
Browser-ondersteuning
Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.
Bureaublad
| Chrome | Firefox | D.W.Z | Rand | Safari |
|---|---|---|---|---|
| 91 | 87 | 11 | 88 | TP |
Mobiel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
Verwant
- De float-eigenschap
Meer informatie
- Inzicht in de Humble Clearfix
- Overloop: een geheim voordeel
- Overloop op MDN
- Overloop op W3C
- Opsporen / verhelpen van onbedoelde overloop van het lichaam