Į overflowturto valdymo, kas atsitinka su turiniu, kuris pertraukas už jos ribų: įsivaizduoti div, kurioje jūs aiškiai nustatyti, kad būtų 200px pločio, tačiau yra vaizdas, kuris yra 300 x pločio. Tas vaizdas išlįs iš div ir bus visiblenumatytasis. Jei nustatysite overflowvertę į hidden, vaizdas bus nutrauktas esant 200 taškų.
div ( overflow: visible | hidden | scroll | auto | inherit )Vertybės
visible: turinys nėra iškarpomas, kai jis eina už langelio ribų. Tai yra numatytoji turto vertėhidden: perpildytas turinys bus paslėptas.scroll: panašus į paslėptą, išskyrus tai, kad vartotojai galės slinkti paslėptą turinįauto: jei turinys tęsiasi už jo langelio ribų, turinys bus paslėptas, o slinkties juosta turėtų būti matoma vartotojams, kad galėtų perskaityti likusį turinį.initial: naudoja numatytąją vertę, kuri yravisibleinherit: nustato jo pagrindinio elemento vertės perpildymą.
Atminkite, kad tekstas natūraliai apvyniojamas elemento gale (nebent pakeičiamas tarpas), todėl tekstas retai bus perpildymo priežastis. Jei nebus nustatytas aukštis, tekstas taip pat pakels aukštesnį elementą. Perpildymas dažniausiai pasireiškia tada, kai nustatomas aiškus plotis ir aukštis ir būtų nepageidautina, kad bet koks turinys pasklistų, arba kai aiškiai vengiama slinkimo.
Matomas
Jei visiškai nenustatote perpildymo ypatybės, matomas numatytasis nustatymas. Taigi apskritai nėra jokios priežasties aiškiai nustatyti šią ypatybę matomą, nebent jūs nepaisote jos nustatymo kitur.
Svarbu atsiminti, kad nors turinys matomas ne laukelyje, tas turinys neturi įtakos puslapio srautui. Pavyzdžiui:
Apskritai neturėtumėte nustatyti statinio aukščio langeliuose, kuriuose yra žiniatinklio tekstas, todėl tai neturėtų kilti.
Paslėpta
Paslėptas priešingas numatytam matomam elementui . Tai tiesiogine prasme slepia bet kokį turinį, kuris tęsiasi už langelio ribų.
Tai ypač naudinga naudojant dinaminį turinį ir perpildymo galimybę, sukeliančią rimtų išdėstymo problemų. Tačiau nepamirškite, kad tokiu būdu paslėptas turinys yra visiškai nepasiekiamas (trūksta šaltinio peržiūros). Pvz., Vartotojui numatytasis šrifto dydis nustatytas didesnis, nei tikėtumėtės, galite išstumti tekstą už langelio ribų ir visiškai jį paslėpti nuo jo rodinio.
Slinkite
Nustačius slinkties perpildymo vertę, turinys bus paslėptas nuo pateikimo už langelio ribų, tačiau bus pasiūlyta slinkties juostelėmis slinkti laukelio vidų, kad būtų galima peržiūrėti turinį.
Pažymėtina, kad ši vertė yra ta, kad gausite Abi horizontalias ir vertikalias slinkties juostas, kad ir kas būtų, net jei turiniui reikia tik vieno ar kito.
„iOS“ spartųjį slinkimą galima įjungti šiai vertei naudojant -webkit-overflow-scrolling.
Pastaba: „OS X Lion“, kai slinkties juostos nustatomos rodyti tik tada, kai jos naudojamos, scrollelgiasi panašiai auto, kai bus rodomos tik reikalingos slinkties juostos.
Automatinis
Automatinis perpildymas yra labai panašus į slinkties vertę, tik jis išsprendžia slinkties juostų gavimo problemą, kai jums jų nereikia. Slinkties juostos bus rodomos tik tuo atveju, jei yra turinio, kuris iš tikrųjų išsiskiria iš elemento.
perpildymas-x ir perpildymas-y
Jis taip pat galima manipuliuoti turinio perpildymo horizontaliai arba vertikaliai su overflow-xir overflow-ysavybių. Pavyzdžiui, žemiau esančiame demonstraciniame elemente horizontalų perpildymą galima slinkti, o už langelio aukščio esantis tekstas yra paslėptas:
.box ( overflow-y: hidden; overflow-x: scroll; )Plūdinis kliringas
Kaip bebūtų keista, vienas iš populiariausių perpildymo būdų yra plūdinis valymas. Nustačius perpildymą elementas neišvalo plūdės, jis savaime išvalomas. Tai reiškia, kad elementas su perpildymu (bet kokia vertė, išskyrus visible), išsiplės tiek, kiek jam reikia, kad apimtų antrinius elementus, kurie yra plūduriuojantys (užuot griuvę), darant prielaidą, kad aukštis nėra deklaruojamas. Kaip šitas:
Geresnė plūdės valymo technika yra „clearfix“, nes tam nereikia keisti perpildymo savybės jums nereikalingu būdu.
Generuojamas bloko formatavimo kontekstas
Įdomu tai, kad overflowtaip pat bus sukurtas naujas bloko formatavimo kontekstas, kuris yra naudingas, jei norime sulyginti bloko elementą šalia plūduriuojančio. Toliau pateiktame pavyzdyje parodome, kaip pastraipų skaičius sąveikauja su slankiuoju vaizdu pagal numatytuosius nustatymus, tada mes naudojame overflow: hiddentekstą sulyginti savo laukelyje:
Tai kyla iš puikios Nicole Sullivan žinutės, kuri įkvėpė žiniasklaidos objektą.
Ar slinkties juostas galima sukurti naudojant CSS?
Anksčiau galėjote stilizuoti slinkties langus IE (v5.5?), Bet ne daugiau. Dabar galite juos vėl suformuoti „WebKit“ naršyklėse. Jei jums reikia skirtingų naršyklių slinkties, ieškokite „JavaScript“.
Jei elementui reikia pridėti slinkties juostų, kad būtų užtikrinta perpildymo vertė, „Firefox“ jas iškelia už elemento ribų, išlaikydamas matomą plotį / aukštį, kaip nurodyta. IE įdeda slinkties juostas į vidų, išlaikydamas bendrą plotį / aukštį, kaip nurodyta.
Demonstracija
Šio straipsnio demonstracinės versijos paimtos iš šio pavyzdinio puslapio.
Naršyklės palaikymas
Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.
Darbalaukis
| „Chrome“ | „Firefox“ | T.Y | Briauna | „Safari“ |
|---|---|---|---|---|
| 91 | 87 | 11 | 88 | TP |
Mobilusis / planšetinis kompiuteris
| „Android Chrome“ | „Android Firefox“ | „Android“ | „iOS Safari“ |
|---|---|---|---|
| 88 | 85 | 81 | 14,0–14,4 |
Susijęs
- Plūduriuojantis turtas
Daugiau informacijos
- Suprasti „Humble Clearfix“
- Perpildymas: slapta nauda
- MDN perpildymas
- W3C perpildymas
- Nenumatyto kūno perpildymo radimas / fiksavimas