The overflowproperty kontrole što se događa na sadržaj koji razbija izvan njezinih granica: zamisliti divu kojoj ste izričito postavljen da bude 200px širine, ali sadrži sliku koja je 300px širine. Ta će slika viriti iz div-a i bit visibleće zadana. Ako postavite overflowvrijednost na hidden, slika će se odrezati na 200px.
div ( overflow: visible | hidden | scroll | auto | inherit )Vrijednosti
visible: sadržaj se ne isječe kada se kreće izvan okvira. Ovo je zadana vrijednost svojstvahidden: sadržaj koji prelijeva bit će skriven.scroll: slično skrivenom, osim što će korisnici moći pomicati kroz skriveni sadržajauto: ako se sadržaj odvija izvan okvira, taj će sadržaj biti skriven, dok bi traka za pomicanje trebala biti vidljiva kako bi korisnici mogli čitati ostatak sadržaja.initial: koristi zadanu vrijednost koja jevisibleinherit: postavlja preljev na vrijednost svog nadređenog elementa.
Imajte na umu da će se tekst prirodno umotati na kraj elementa (osim ako se ne promijeni razmak), pa će tekst rijetko biti uzrok prelijevanja. Ako se ne postavi visina, tekst će samo gurnuti i element viši. Prelijevanje dolazi u obzir češće kada se postave eksplicitne širine i visine i bilo bi nepoželjno da se bilo koji sadržaj izlije ili kad se pomicanje izričito izbjegava.
Vidljivo
Ako uopće ne postavite svojstvo preljeva, zadano je vidljivo. Dakle, općenito nema razloga da se ovo svojstvo izričito postavi vidljivim, osim ako ga ne nadjačavate da bi bilo postavljeno negdje drugdje.
Ovdje je važno imati na umu da, iako je sadržaj vidljiv izvan okvira, taj sadržaj ne utječe na tijek stranice. Na primjer:
Općenito, ionako ne biste trebali postavljati statičke visine na kutije s web tekstom, pa se ne bi trebalo pojavljivati.
Skriven
Suprotno od zadane vidljivosti je skriveno . To doslovno skriva sav sadržaj koji se širi izvan okvira.
To je osobito korisno u upotrebi s dinamičkim sadržajem i mogućnošću preljeva koji uzrokuje ozbiljne probleme s izgledom. Međutim, imajte na umu da je sadržaj koji je skriven na ovaj način krajnje nepristupačan (osim pregleda izvora). Tako na primjer, korisniku je zadana veličina fonta postavljena veća nego što biste očekivali, možda gurate tekst izvan okvira i potpuno ga skrivate od pogleda.
Svitak
Postavljanje vrijednosti preljeva okvira za pomicanje sakrit će sadržaj od prikazivanja izvan okvira, ali će ponuditi trake za pomicanje za pomicanje po unutrašnjosti okvira za prikaz sadržaja.
Uz ovu vrijednost treba napomenuti da ćete dobiti OBOJE vodoravnih i okomitih klizača bez obzira na sve, čak i ako sadržaj zahtijeva samo jedno ili drugo.
iOS 'pomicanje impulsa može se omogućiti za ovu vrijednost pomoću -webkit-overflow-scrolling.
Napomena: U OS X Lion, kada su klizači postavljeni tako da se prikazuju samo kad se koriste, scrollponaša se slično tome auto, jer će se prikazati samo potrebne klizače.
Auto
Automatsko prelijevanje vrlo je slično vrijednosti pomicanja, samo što rješava problem dobivanja klizača kada vam nisu potrebni. Klizači će se prikazati samo ako postoji sadržaj koji stvarno izbija iz elementa.
overflow-x i overflow-y
Također je moguće manipulirati prelijevanje sadržaja vodoravno ili okomito sa overflow-xi overflow-ysvojstvima. Na primjer, u demonstraciji ispod vodoravnog preljeva možete se pomicati dok je tekst koji se proteže iznad visine okvira skriven:
.box ( overflow-y: hidden; overflow-x: scroll; )Čišćenje plovka
Jedno od najpopularnijih načina postavljanja preljeva, začudo je čišćenje plovka. Postavljanje preljeva ne uklanja plovak na elementu, on se samo-briše. To znači da će se element s preljevom (bilo koja vrijednost osim visible) proširiti onoliko koliko je potrebno da obuhvati podređene elemente koji su plutajući (umjesto da se sruše), pod pretpostavkom da visina nije deklarirana. Kao ovo:
Bolja tehnika čišćenja plutajućeg slova je clearfix, jer ne zahtijeva da promijenite svojstvo preljeva na način koji vam nije potreban.
Generiranje konteksta formatiranja bloka
Zanimljivo je primijetiti da overflowće se stvoriti i novi kontekst formatiranja bloka koji je koristan ako želimo poravnati element bloka uz plutajući. U primjeru u nastavku prikazujemo kako će određeni broj odlomaka prema zadanim postavkama komunicirati s plutajućom slikom, a zatim koristimo overflow: hiddenza poravnavanje teksta u svom okviru:
Ovo dolazi iz sjajnog posta Nicole Sullivan koji je nastavio nadahnjivati medijski objekt.
Mogu li se klizači oblikovati CSS-om?
Nekad ste mogli oblikovati klizače u IE (v5.5?), Ali ne više. Sada ih možete ponovo oblikovati u preglednicima WebKit. Ako su vam potrebne prilagođene klizače u više preglednika, potražite JavaScript.
Ako element treba dodati klizače kako bi uvažio vrijednost preljeva, Firefox ih stavlja izvan elementa, zadržavajući vidljivu širinu / visinu kako je deklarirano. IE stavlja klizače unutra, zadržavajući ukupnu širinu / visinu kako je deklarirano.
Demo
Demo za ovaj članak preuzet s ove ogledne stranice.
Podrška preglednika
Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.
Radna površina
| Krom | Firefox | IE | Rub | Safari |
|---|---|---|---|---|
| 91 | 87 | 11 | 88 | TP |
Mobitel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14,0-14,4 |
Povezano
- Svojstvo plovak
Više informacija
- Razumijevanje Humble Clearfix-a
- Preljev: tajna korist
- Preljev na MDN
- Preljev na W3C
- Pronalaženje / popravljanje nenamjernog prelijevanja tijela