overflowVara kontrolli, mis juhtub sisu, mis puruneb väljaspool oma piire: kujutage ette div, kus olete selgesõnaliselt määratud olema 200 pikslit lai, kuid on pilt, mis on 300 pikslit lai. See pilt jääb divist välja ja on visiblevaikimisi. Kui määrate overflowväärtuseks hidden, lõigatakse pilt 200 pikslisse.
div ( overflow: visible | hidden | scroll | auto | inherit )Väärtused
visible: sisu ei lõigata, kui see jätkub väljaspool oma kasti. See on vara vaikeväärtushidden: ülevoolav sisu peidetakse.scroll: sarnane peidetuga, välja arvatud, et kasutajad saavad peidetud sisu sirvidaauto: kui sisu jätkub väljaspool oma kasti, siis see sisu peidetakse, samal ajal kui kasutajatel peaks olema ülejäänud sisu lugemiseks nähtav kerimisriba.initial: kasutab vaikeväärtust, mis onvisibleinherit: määrab ülevoolu oma põhielemendi väärtuseks.
Pidage meeles, et tekst mähitakse loomulikult elemendi lõppu (kui tühikut ei muudeta), nii et tekst on ülevoolu põhjus harva. Kui kõrgust pole määratud, lükkab tekst ka elemendi ka kõrgemaks. Ülevoolu mängitakse sagedamini siis, kui määratakse selged laiused ja kõrgused ning oleks ebasoovitav, et mõni sisu välja valguks või kui kerimist selgesõnaliselt välditakse.
Nähtav
Kui te ei määra ülevoolu omadust üldse, on vaikimisi nähtav. Nii et üldiselt pole põhjust seda omadust selgesõnaliselt nähtavaks seada, kui te ei muuda seda mujal seadistamast.
Siinkohal on oluline meeles pidada, et kuigi sisu on nähtav väljaspool kasti, ei mõjuta see sisu lehe voogu. Näiteks:
Üldiselt ei tohiks te niikuinii seada staatilisi kõrgusi kastidele, kus on veebitekst, nii et see ei tohiks välja tulla.
Varjatud
Vaikse nähtavuse vastand on peidetud . See peidab sõna otseses mõttes igasugust sisu, mis ulatub kastist kaugemale.
See on eriti kasulik dünaamilise sisu ja ülevoolu võimaluse korral, mis põhjustab tõsiseid paigutusprobleeme. Pidage siiski meeles, et sel viisil peidetud sisu on täiesti ligipääsmatu (allika vaatamiseks puudub). Nii et näiteks on kasutaja vaikefondi suurus seatud suuremaks, kui arvata oskate, võite lükata teksti kastist välja ja peita see täielikult tema vaate eest.
Kerige
Karbi ülevooluväärtuse seadistamine kerimiseks peidab sisu väljaspool kasti renderdamise eest, kuid pakub sisu vaatamiseks kerimisribasid kasti sisemuse kerimiseks.
Selle väärtusega tuleb märkida, et saate MÕLEMA horisontaalset ja vertikaalset kerimisriba, ükskõik mis, isegi kui sisu nõuab ainult üht või teist.
Selle väärtuse jaoks saab iOS-i hoogsat kerimist lubada -webkit-overflow-scrolling.
Märkus. Kui OS X Lion on seatud näitama ainult kasutamise ajal, scrollkäitub see sarnaselt sellega auto, et kuvatakse ainult vajalikud kerimisribad.
Automaatne
Automaatne ülevool on väga sarnane kerimisväärtusega, ainult see lahendab kerimisribade hankimise probleemi, kui te neid ei vaja. Kerimisribasid kuvatakse ainult siis, kui on sisu, mis elemendist tegelikult välja murrab.
ülevool-x ja ülevool-y
Samuti on võimalik manipuleerida sisu ülevooluga horisontaalselt või vertikaalselt omadustega overflow-xja overflow-y. Näiteks demo all saab horisontaalset ülevoolu sirvida, kui kasti kõrgusest välja ulatuv tekst on peidetud:
.box ( overflow-y: hidden; overflow-x: scroll; )Float Clearing
Üks ülevoolu seadmise populaarsemaid kasutusviise on kummalisel kombel ujuklaasimine. Ülevoolu määramine ei kustuta elemendi ujukit, see kustub ise. See tähendab, et ülevooluga element (mis tahes väärtus, välja arvatud visible) laieneb nii suureks kui vaja, et hõlmata hõljuvaid allelemente (varisemise asemel), eeldades, et kõrgust pole deklareeritud. Nagu nii:
Parem ujukkorraldusmeetod on clearfix, kuna see ei nõua ülevoolu omaduse muutmist viisil, mida te ei vaja.
Blokivormingu konteksti genereerimine
Huvitav on märkida, et overflowsee loob ka uue plokivormingu konteksti, mis on kasulik, kui soovime joondada plokielemendi ujuki kõrvale. Allpool toodud näites näitame, kuidas mitu lõiku vaikimisi ujuva pildiga suhtleb ja seejärel overflow: hiddenjoondame teksti oma kasti:
See pärineb Nicole Sullivani suurepärasest postitusest, mis inspireeris meediaobjekti.
Kas kerimisribasid saab kujundada CSS-iga?
Varem oskasite IE-s (v5.5?) Stiiliribasid kujundada, kuid mitte rohkem. Saate neid nüüd WebKiti brauserites uuesti stiilida. Kui vajate brauseriüleseid kohandatud kerimisribasid, vaadake JavaScripti.
Kui elemendil tuleb ülevoolu väärtuse austamiseks lisada kerimisribad, paigutab Firefox need elemendist väljapoole, hoides nähtavat laiust / kõrgust deklareerituna. IE paneb kerimisribad sisse, hoides kogu laiust / kõrgust vastavalt deklareerimisele.
Demo
Selle artikli demod on võetud sellelt näidislehelt.
Brauseri tugi
Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.
Töölaud
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 91 | 87 | 11 | 88 | TP |
Mobiil / tahvelarvuti
| Android Chrome | Android Firefox | Android | iOS-i Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14,0–14,4 |
Seotud
- Ujukvara
Rohkem informatsiooni
- Alandliku Clearfixi mõistmine
- Ülevool: salajane kasu
- MDN-i ülevool
- W3C ülevool
- Keha soovimatu ülevoolu leidmine / kinnitamine