Ovaj članak demonstrira metodu za zaustavljanje prelijevanja sadržaja i omogućavanje pomicanja pomoću CSS-a.
Kako zaustaviti prelijevanje sadržaja i omogućiti pomicanje?
Svrha zaustavljanja prelijevanja sadržaja je da sadržaj stane unutar svog spremnika i da ne utječe negativno na izvedbu web stranice. Može lako razumjeti kontekst i može poboljšati dostupnost korisnicima. Za detaljno objašnjenje raspravimo kroz primjer:
Korak 1: Omogućite pomicanje s preljevom sadržaja
U početku počnite s izradom tablice unutar HTML datoteke na koju će se primijeniti efekt pomicanja. Pretpostavimo da je tablica već stvorena i sastoji se od šest redaka i sedam stupaca, a tablici su dostavljeni neki lažni podaci:
< stol >
< tr >
< th > Glava 1 < / th >
< th > Glava 2 < / th >
< th > Glava 3 < / th >
< th > Glava 4 < / th >
< th > Glava 5 < / th >
< th > Glava 6 < / th >
< th > Glava 7 < / th >
< / tr >
< tr >
< td > Redak 1 < / td >
< td > Redak 1 < / td >
< td > Redak 1 < / td >
< td > Redak 1 < / td >
< td > Redak 1 < / td >
< td > Redak 1 < / td >
< td > Redak 1 < / td >
< / tr >
< tr >
< td > Redak 2 < / td >
< td > Redak 2 < / td >
< td > Redak 2 < / td >
< td > Redak 2 < / td >
< td > Redak 2 < / td >
< td > Redak 2 < / td >
< td > Redak 2 < / td >
< / tr >
< tr >
< td > redak 3 < / td >
< td > redak 3 < / td >
< td > redak 3 < / td >
< td > redak 3 < / td >
< td > redak 3 < / td >
< td > redak 3 < / td >
< td > redak 3 < / td >
< / tr >
< tr >
< td > Redak 4 < / td >
< td > Redak 4 < / td >
< td > Redak 4 < / td >
< td > Redak 4 < / td >
< td > Redak 4 < / td >
< td > Redak 4 < / td >
< td > Redak 4 < / td >
< / tr >< tr >
< td > redak 5 < / td >
< td > redak 5 < / td >
< td > redak 5 < / td >
< td > redak 5 < / td >
< td > redak 5 < / td >
< td > redak 5 < / td >
< td > redak 5 < / td >
< / tr >
< tr >
< td > redak 6 < / td >
< td > redak 6 < / td >
< td > redak 6 < / td >
< td > redak 6 < / td >
< td > redak 6 < / td >
< td > redak 6 < / td >
< td > redak 6 < / td >
< / tr >
< / stol >
Nakon izvršenja gornjeg isječka koda, web stranica izgleda ovako:
Izlaz prikazuje da su podaci tablice u manje čitljivom formatu i da tablica zauzima puno prostora.
Korak 2: Postavljanje efekta prelijevanja i pomicanja U gornjem isječku koda: Nakon izvršenja gornjeg isječka koda, web stranica izgleda ovako: Web stranica pokazuje da tablica sada zauzima manje prostora i sprječava prelijevanje sadržaja. Osim toga, omogućen je efekt pomicanja. Bilješka : Postavljanjem “ preljev: autom ' ili ' preljev: svitak ”, korisnici mogu omogućiti pomicanje za prekomjerni sadržaj. Osim toga, ' preljev: skriven ” može se koristiti za potpuno sprječavanje prelijevanja. Svojstva 'overflow-x' i 'overflow-y' koriste se za kontrolu preljeva i omogućavanje pomicanja po vodoravnoj i okomitoj osi. Sprječava prelijevanje sadržaja i omogućuje pomicanje kako bi se napravio interaktivni responzivni dizajn za sve uređaje. Ovaj je članak pokazao kako spriječiti prelijevanje sadržaja i omogućiti pomicanje pomoću CSS-a.
Nakon toga zamotajte stol s roditeljem “
.prelijevanje {
širina : 200 px ;
visina : 200 px ;
preljev-x : auto ;
preljev-y : auto ;
scroll-ponašanje : glatko, nesmetano ;
}
Zaključak