De overflowejendom kontroller hvad der sker med indhold, som pauser uden for sine grænser: forestille sig en div, hvor du har udtrykkeligt sat til at være 200 pixel bred, men indeholder et billede, der er 300px bred. Dette billede vil stikke ud af div og være visiblesom standard. Mens du indstiller overflowværdien til hidden, afskæres billedet ved 200 pixel.
div ( overflow: visible | hidden | scroll | auto | inherit )Værdier
visible: indholdet klippes ikke, når det fortsætter uden for kassen. Dette er ejendommens standardværdihidden: overfyldt indhold skjules.scroll: ligner skjult, undtagen at brugere vil være i stand til at rulle gennem det skjulte indholdauto: Hvis indholdet fortsætter uden for boksen, skjules det indhold, mens en rullebjælke skal være synlig for brugerne til at læse resten af indholdet.initial: bruger den standardværdi, der ervisibleinherit: indstiller overløbet til værdien af dets overordnede element.
Husk, at tekst naturligt ombrydes i slutningen af et element (medmindre hvidt mellemrum ændres), så tekst sjældent vil være årsagen til overløb. Medmindre en højde er indstillet, skubber teksten også et element højere. Overflow kommer oftere i spil, når eksplicitte bredder og højder er indstillet, og det ville være uønsket, at noget indhold spildes ud, eller når man eksplicit undgår at rulle.
Synlig
Hvis du slet ikke indstiller overløbsegenskaben, er standard synlig. Så generelt er der ingen grund til eksplicit at indstille denne egenskab til synlig, medmindre du tilsidesætter den fra at blive indstillet andetsteds.
Den vigtige ting at huske her er, at selvom indholdet er synligt uden for boksen, påvirker det ikke indholdet af siden. For eksempel:
Generelt skal du alligevel ikke indstille statiske højder på kasser med webtekst i dem, så det skal ikke komme op.
Skjult
Det modsatte af den synlige standard er skjult . Dette skjuler bogstaveligt talt alt indhold, der strækker sig ud over boksen.
Dette er især nyttigt ved brug med dynamisk indhold og muligheden for et overløb, der forårsager alvorlige layoutproblemer. Husk dog, at indhold, der er skjult på denne måde, er fuldstændig utilgængeligt (kort efter at have vist kilden). Så for eksempel har en bruger deres standard skrifttypestørrelse større end du ville forvente, du skubber muligvis tekst uden for en boks og skjuler den helt fra deres synspunkt.
Rul
Indstilling af overløbsværdien af et felt til at rulle skjuler indholdet fra gengivelse uden for feltet, men tilbyder rullepaneler til at rulle det indre af feltet for at se indholdet.
Bemærk med denne værdi er, at du får BEGGE vandrette og lodrette rullepaneler uanset hvad, selvom indholdet kun kræver den ene eller den anden.
iOS 'momentumrulning kan aktiveres for denne værdi med -webkit-overflow-scrolling.
Bemærk: I OS X Lion, når rullebjælker er indstillet til kun at vises, når de bruges, scrollopfører de sig mere som ved auto, at kun nødvendige rullebjælker vises.
Auto
Autooverløb svarer meget til rulleværdien, kun det løser problemet med at få rullebjælker, når du ikke har brug for dem. Rullebjælkerne vises kun, hvis der er indhold, der rent faktisk bryder ud af elementet.
overløb-x og overløb-y
Det er også muligt at manipulere overløb af indhold vandret eller lodret med overflow-xog overflow-yegenskaber. For eksempel i demoen nedenfor kan det vandrette overløb rulles igennem, mens teksten, der strækker sig ud over boksens højde, er skjult:
.box ( overflow-y: hidden; overflow-x: scroll; )Float Clearing
En af de mere populære anvendelser af indstilling af overløb er underligt nok float clearing. Indstilling af overløb rydder ikke svømmeren ved elementet, det rydder selv. Dette betyder, at elementet med overløb (enhver værdi undtagen visible) vil strække sig så stort, som det har brug for at omfatte underordnede elementer indeni, der er flydende (i stedet for at kollapse), forudsat at højden ikke er deklareret. Sådan her:
En bedre float clearing-teknik er clearfix, da det ikke kræver, at du ændrer overløbsegenskaben på en måde, du ikke har brug for.
Genererer kontekst for blokformatering
Det er interessant at bemærke, at overflowder også oprettes en ny blokformateringskontekst, som er nyttig, hvis vi vil justere et blokelement ved siden af en flydende. I eksemplet nedenfor viser vi, hvordan et antal afsnit interagerer med et flydende billede som standard, og derefter bruger vi overflow: hiddentil at justere teksten i sin egen boks:
Dette kommer fra et godt indlæg af Nicole Sullivan, som fortsatte med at inspirere medieobjektet.
Kan rullepaneler designes med CSS?
Du plejede at kunne style rullebjælker i IE (v5.5?), Men ikke mere. Du kan style dem nu igen i WebKit-browsere. Hvis du har brug for brugerdefinerede rullepaneler over browseren, skal du se JavaScript.
Hvis et element skal have rullepaneler tilføjet for at respektere overløbsværdien, placerer Firefox dem uden for elementet og holder den synlige bredde / højde som deklareret. IE sætter rullebjælkerne inde og holder den samlede bredde / højde som angivet.
Demo
Demoer til denne artikel hentet fra denne eksempelside.
Browsersupport
Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 91 | 87 | 11 | 88 | TP |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
Relaterede
- Flydeegenskaben
Mere information
- Forståelse af Humble Clearfix
- Overflow: en hemmelig fordel
- Overflow på MDN
- Overløb på W3C
- At finde / ordne utilsigtet kropsoverløb
