Pogledajmo klasični primjer elementa koji je vrlo mali po svom sadržaju i koji generira preljev jer je sve lakše vidjeti kroz primjere, prvo pogledajmo jedan prije nego što nastavimo vidjeti svojstva koja nam pomažu kontrolirati preljev.
PrimjerPostoji mnogo različitih vrsta voća - samo preko 500 vrsta banana postoji. Dok dodamo bezbroj vrsta jabuka, naranči i drugog dobro poznatog voća, suočeni smo s tisućama izbora.
Prethodni kôd generira sljedeći rezultat u pregledniku:
overflow-x / overflow-y: Određuju ponašanje vodoravnog ili okomitog prelijevanja.
Prelijevanje: To je prečac za korištenje prethodnog svojstva i redoslijed kojim radi overflow, overflow x, overflow y.
Svojstva koja se mogu koristiti s elementom prelijevanje su kako slijedi:automobil: Ova vrijednost delegira pregledniku odgovornost odlučivanja što će učiniti, obično se događa da se traka za pomicanje prikaže kada se element počne prelijevati i sadrži ga.
skriven: Sadržaj se prikazuje do dijela koji se ne prelijeva, skrivajući ostatak sadržaja, nema mehanizme da kaže korisniku što treba učiniti da vidi ostatak sadržaja.
nema sadržaja: Prepuni sadržaj uklanja se ako se ne može smjestiti u spremnik. Ovu vrijednost ne podržava niti jedan od najpopularnijih preglednika
bez prikaza: Sadržaj je skriven ako se ne može u potpunosti prikazati. Ovu vrijednost ne podržava niti jedan od najpopularnijih preglednika.
svitak: Preglednik generira traku za pomicanje koja korisniku omogućuje da uvijek vidi preplavljeni sadržaj unutar spremnika. Traka će ovisiti o pregledniku i sustavu da definiraju način prikaza. Traka za pomicanje uvijek će biti vidljiva čak i ako element ne pređe.
vidljivo: Ovo je zadana vrijednost. Sadržaj se uvijek prikazuje čak i ako se prelije.
Sada kada imamo alate za napad na preljev, da vidimo u praksi kako ga možemo primijeniti, ništa bolje od malog koda koji to pokazuje:PrimjerPostoji mnogo različitih vrsta voća - samo preko 500 vrsta banana postoji. Dok dodamo bezbroj vrsta jabuka, naranči i drugog dobro poznatog voća, suočeni smo s tisućama izbora.
Postoji mnogo različitih vrsta voća - samo preko 500 vrsta banana postoji. Dok dodamo bezbroj vrsta jabuka, naranči i drugog dobro poznatog voća, suočeni smo s tisućama izbora.
Koristili smo dva elementa kako bismo pokazali kako se prelijevanje, na prvo mjesto stavljamo nekretninu skriven gdje znamo da će se samo sadržaj prikazivati do mjesta gdje počinje prelijevanje, tada je ostatak skriven, a za drugi koristimo scroll, s kojim će se prikazati traka za pomicanje prelazi li element ili ne, da vidimo rezultat:
