De overfloweiendoms kontroller hva som skjer med innhold som bryter utenom sine grenser: forestille seg en divder du har eksplisitt satt til å være 200px bred, men inneholder et bilde som er 300px bred. Det bildet vil stikke ut av div og være visiblesom standard. Mens du setter overflowverdien til hidden, vil bildet kuttes av med 200 piksler.
div ( overflow: visible | hidden | scroll | auto | inherit )Verdier
visible: innholdet klippes ikke når det fortsetter utenfor esken. Dette er standardverdien for eiendommenhidden: overfylt innhold blir skjult.scroll: ligner skjult bortsett fra at brukere vil kunne bla gjennom det skjulte innholdetauto: Hvis innholdet fortsetter utenfor boksen, vil innholdet bli skjult mens en rullefelt skal være synlig for brukere å lese resten av innholdet.initial: bruker standardverdien som ervisibleinherit: setter overløpet til verdien av det overordnede elementet.
Husk at tekst naturlig vil vikles inn på slutten av et element (med mindre hvite mellomrom endres), så tekst vil sjelden være årsaken til overløp. Med mindre en høyde er satt, vil tekst bare skyve et element høyere også. Overflyt kommer oftere til spill når eksplisitte bredder og høyder er angitt, og det ville være uønsket for noe innhold å spyle ut, eller når du ruller eksplisitt unngås.
Synlig
Hvis du ikke angir overløpsegenskapen i det hele tatt, er standard synlig. Så generelt er det ingen grunn til å eksplisitt sette denne egenskapen til synlig med mindre du overstyrer den fra å bli satt andre steder.
Det viktige å huske her er at selv om innholdet er synlig utenfor boksen, påvirker ikke innholdet flyten på siden. For eksempel:
Generelt sett bør du ikke sette statiske høyder på bokser med webtekst i seg uansett, så det skal ikke komme opp.
Skjult
Det motsatte av standard synlig er skjult . Dette skjuler bokstavelig talt alt innhold som strekker seg utenfor boksen.
Dette er spesielt nyttig i bruk med dynamisk innhold og muligheten for overløp som forårsaker alvorlige layoutproblemer. Vær imidlertid oppmerksom på at innhold som er skjult på denne måten er helt utilgjengelig (uten å se på kilden). Så for eksempel har en bruker standard skriftstørrelse satt større enn du forventer, du kan skyve tekst utenfor en boks og skjule den helt fra deres synspunkt.
Bla
Hvis du setter overløpsverdien til en boks for å bla, skjules innholdet fra å gjenges utenfor boksen, men tilbyr rullefelt for å bla inn i feltet for å se innholdet.
Merknad med denne verdien er at du får BEGGE horisontale og vertikale rullefelt uansett hva, selv om innholdet bare krever det ene eller det andre.
iOS 'momentumrulling kan aktiveres for denne verdien med -webkit-overflow-scrolling.
Merk: I OS X Lion, når rullefelt er satt til å bare vises når de brukes, scrolloppfører de seg mer som autoved at bare nødvendige rullefelt vises.
Auto
Automatisk overløp ligner veldig på rulleverdien, bare det løser problemet med å få rullefelt når du ikke trenger dem. Rullelinjene vises bare hvis det er innhold som faktisk bryter ut av elementet.
overløp-x og overløp-y
Det er også mulig å manipulere overflyt av innhold horisontalt eller vertikalt med overflow-xog overflow-y-egenskapene. For eksempel i demoen under kan det horisontale overløpet blas gjennom mens teksten som strekker seg utenfor høyden på boksen er skjult:
.box ( overflow-y: hidden; overflow-x: scroll; )Float Clearing
En av de mer populære bruksområdene for å sette overløp, merkelig nok, er float clearing. Innstilling av overløp fjerner ikke flottøren ved elementet, den rydder selv. Dette betyr at elementet med overløp (hvilken som helst verdi unntatt visible) vil strekke seg så stort som det trenger for å omfatte underordnede elementer inni som er flytende (i stedet for å kollapse), forutsatt at høyden ikke er oppgitt. Som dette:
En bedre teknikk for flyting av clearing er clearfix, da det ikke krever at du endrer overløpsegenskapen på en måte du ikke trenger.
Genererer kontekst for blokkformatering
Det er interessant å merke seg at overflowdet også vil opprette en ny blokkformateringskontekst som er nyttig hvis vi vil justere et blokkelement ved siden av en flytende. I eksemplet nedenfor viser vi hvordan et antall avsnitt vil samhandle med et flytende bilde som standard, og deretter bruker vi overflow: hiddentil å justere teksten i sin egen rute:
Dette kommer fra et flott innlegg av Nicole Sullivan som fortsatte å inspirere medieobjektet.
Kan rullefelt utformes med CSS?
Du pleide å være i stand til å style rullefelt i IE (v5.5?), Men ikke mer. Du kan style dem nå igjen i WebKit-nettlesere. Hvis du trenger egendefinerte rullefelt i flere nettlesere, kan du se JavaScript.
Hvis et element må ha rullefelt lagt til for å respektere overløpsverdien, setter Firefox dem utenfor elementet, og holder den synlige bredden / høyden som deklarert. IE setter rullefeltene inne, og holder den totale bredden / høyden som oppgitt.
Demo
Demoer for denne artikkelen hentet fra denne eksempelsiden.
Nettleserstøtte
Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.
Desktop
| Chrome | Firefox | DVS | Kant | Safari |
|---|---|---|---|---|
| 91 | 87 | 11 | 88 | TP |
Mobil / nettbrett
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
I slekt
- Flyteeiendommen
Mer informasjon
- Forstå Humble Clearfix
- Overflow: en hemmelig fordel
- Overløp på MDN
- Overløp på W3C
- Finne / fikse utilsiktet kroppsoverløp
