Za overflownadzor lastnine Kaj se zgodi z vsebino, ki prelomi zunaj njenih meja: predstavljati div, v katerem ste izrecno določiti, da je od 200 širok, vendar vsebuje sliko, ki je 300px široko. Ta slika bo štrlela iz divja in bo visibleprivzeto. Če nastavite overflowvrednost na hidden, bo slika odrezana pri 200 slikovnih pik.
div ( overflow: visible | hidden | scroll | auto | inherit )Vrednote
visible: vsebina ni odrezana, ko gre zunaj polja. To je privzeta vrednost lastnostihidden: prepolna vsebina bo skrita.scroll: podobno kot skrito, le da se bodo uporabniki lahko premikali po skriti vsebiniauto: če vsebina poteka zunaj polja, bo ta vsebina skrita, medtem ko bi morali biti drsni trakovi vidni, da lahko uporabniki preberejo preostalo vsebino.initial: uporablja privzeto vrednost, ki jevisibleinherit: nastavi preliv na vrednost nadrejenega elementa.
Ne pozabite, da se bo besedilo naravno zavilo na koncu elementa (razen, če se ne spremeni presledek), zato bo besedilo le redko vzrok za prelivanje. Če ni nastavljena višina, bo besedilo samo potisnilo tudi element višje. Prelivanje pride v poštev pogosteje, če so nastavljene eksplicitne širine in višine in bi bilo neželeno, da bi se kakršna koli vsebina razlila ali če bi se izrecno izognili drsenju.
Vidno
Če lastnosti prelivanja sploh ne nastavite, je privzeta nastavitev vidna. Torej na splošno ni razloga, da bi to lastnost izrecno nastavili na vidno, razen če bi jo preglasili, da bi jo nastavili drugje.
Pomembno si je tukaj zapomniti, da čeprav je vsebina vidna zunaj polja, ta vsebina ne vpliva na pretok strani. Na primer:
Na splošno tako ali tako ne bi smeli nastavljati statičnih višin na poljih s spletnim besedilom, zato se ne bi smelo pojaviti.
Skrito
Nasprotno od privzeto vidnega je skrito . To dobesedno skriva vse vsebine, ki presegajo okvir.
To je še posebej koristno pri uporabi z dinamično vsebino in pri možnosti prelivanja, ki povzroča resne težave s postavitvijo. Vendar ne pozabite, da je vsebina, ki je skrita na ta način, popolnoma nedostopna (razen ogleda vira). Tako je na primer uporabniku privzeta velikost pisave nastavljena večja, kot bi pričakovali, morda potisnete besedilo izven polja in ga skrijete pred njegovim pogledom.
Pomaknite se
Če nastavite prelivno vrednost polja za pomikanje, bo vsebina skrita pred upodabljanjem zunaj polja, vendar bo ponudila drsne trakove za pomikanje po notranjosti polja za ogled vsebine.
Pri tej vrednosti je treba omeniti, da ne glede na vse dobite OBO vodoravni in navpični drsni trak, tudi če vsebina zahteva le eno ali drugo.
Za to vrednost lahko za to vrednost omogočite iOS-jevo pomikanje po zagonu -webkit-overflow-scrolling.
Opomba: V OS X Lion, ko so drsni trakovi nastavljeni tako, da se prikazujejo samo, ko se uporabljajo, se scrollobnaša bolj podobno auto, saj se prikažejo samo potrebni drsni trakovi.
Samodejno
Samodejni preliv je zelo podoben drsni vrednosti, le da rešuje težavo pri pridobivanju drsnih trakov, ko jih ne potrebujete. Drsni trakovi se bodo prikazali samo, če iz elementa dejansko pride do vsebine.
overflow-x in overflow-y
Možno je tudi manipulirati prelivanje vsebine vodoravno ali navpično z lastnostmi overflow-xin overflow-y. Na primer v predstavitvi pod vodoravnim prelivanjem se lahko pomikate, medtem ko je besedilo, ki sega nad višino polja, skrito:
.box ( overflow-y: hidden; overflow-x: scroll; )Čiščenje plovca
Nenavadno je ena izmed bolj priljubljenih načinov nastavitve prelivanja čiščenje plovca. Nastavitev prelivanja ne odstrani plovca na elementu, ampak se samočisti. To pomeni, da se bo element s prelivom (katera koli vrednost razen visible) razširil toliko, kolikor bo moral zajeti podrejene elemente v notranjosti, ki so plavajoči (namesto da bi se zrušili), ob predpostavki, da višina ni deklarirana. Všečkaj to:
Boljša tehnika plavajočega čiščenja je clearfix, saj ne zahteva, da spremenite lastnost prelivanja na način, ki ga ne potrebujete.
Ustvarjanje konteksta formatiranja blokov
Zanimivo je omeniti, da overflowbo ustvaril tudi nov kontekst oblikovanja bloka, ki je koristen, če želimo poravnati element bloka poleg plavajočega. V spodnjem primeru prikazujemo, kako bo več odstavkov privzeto vplivalo na plavajočo sliko, nato pa overflow: hiddenbesedilo poravnamo v svojem polju:
To izhaja iz odlične objave Nicole Sullivan, ki je navdihnila medijski objekt.
Ali lahko drsnike oblikujete s CSS?
Včasih ste lahko oblikovali drsnike v IE (v5.5?), Vendar ne več. Zdaj jih lahko znova oblikujete v brskalnikih WebKit. Če potrebujete drsnike po meri med brskalniki, poiščite JavaScript.
Če je treba elementu dodati drsne trakove za spoštovanje vrednosti prelivanja, jih Firefox postavi zunaj elementa, pri čemer ohrani vidno širino / višino, kot je navedeno. IE drsne trakove postavi v notranjost in ohrani celotno širino / višino, kot je navedeno.
Demo
Predstavitve za ta članek so vzete s te vzorčne strani.
Podpora za brskalnik
Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.
Namizje
| Chrome | Firefox | IE | Rob | Safari |
|---|---|---|---|---|
| 91 | 87 | 11. | 88 | TP |
Mobilni / tablični računalnik
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14,0-14,4 |
Sorodno
- Lastnost float
Več informacij
- Razumevanje Humble Clearfix-a
- Prelivanje: skrivna korist
- Preliv na MDN
- Preliv na W3C
- Iskanje / odpravljanje nenamernega prelivanja telesa