Stvorite okvir s pomicanjem teksta koristeći CSS i HTML

An HTML pomični okvir je okvir koji dodaje pomične trake na desnu i donju stranu kada je sadržaj okvira veći od dimenzija okvira. Drugim riječima, ako imate okvir u koji može stati oko 50 riječi, a imate tekst od 200 riječi, HTML klizač stavit će trake za pomicanje prema gore kako biste mogli vidjeti dodatnih 150 riječi. U standardnom HTML-u koji bi jednostavno potisnuo višak teksta izvan okvira.

Izrada HTML pomicanja prilično je jednostavna. Samo trebate postaviti širinu i visina elementa koji želite pomaknuti, a zatim upotrijebiti CSS svojstvo overflow da biste postavili način na koji želite da se pomicanje odvija.

Što učiniti s dodatnim tekstom?

Kada imate više teksta nego što stane u prostor na vašem rasporedu, imate nekoliko mogućnosti:

• Prepišite tekst tako da bude kraći i da stane.
• Dopustite tekstu da teče izvan granica i nadam se da se izgled može prilagoditi da ga podrži.
• Odrežite tekst tamo gdje se prelijeva.
• Dodajte trake za pomicanje (obično okomite za tekst) tako da se prostor pomiče kako bi se prikazao dodatni tekst.

Najbolja opcija je obično posljednja opcija: stvorite pomični tekstni okvir. Tada se dodatni tekst i dalje može čitati, ali vaš dizajn nije ugrožen.

HTML i CSS za ovo bi bili:

tekst ovdje... 

The preljev: auto; govori pregledniku da doda trake za pomicanje ako su potrebne da tekst ne bi prelazio granice div. No, da bi ovo funkcioniralo, trebaju vam i svojstva stila širine i visine postavljena na div, tako da postoje granice za prelijevanje.

Također možete odrezati tekst promjenom preljeva: auto; do preljev: skriven; Ako izostavite svojstvo overflow, tekst će se preliti preko granica div-a.

Trake za pomicanje možete dodati više od samog teksta

Ako imate veliku sliku koju želite prikazati u manjem prostoru, možete joj dodati trake za pomicanje na isti način kao što biste to učinili s tekstom.

U ovom primjeru slika 400x509 nalazi se unutar odlomka 300x300.

Tablice mogu imati koristi od traka za pomicanje

Duge tablice informacija može se vrlo brzo pročitati, ali ako ih stavite u div ograničene veličine a zatim dodavanjem svojstva overflow možete generirati tablice s puno podataka koji ne zauzimaju ekstremni prostor na vašem stranica.

Najlakši je način kao kod slika i teksta, samo dodajte div oko tablice, postavite širinu i visinu tog div-a i dodajte svojstvo overflow:

... 

Kad se to dogodi, obično se pojavi vodoravna traka za pomicanje jer preglednik pretpostavlja da krom traka za pomicanje prekriva tablicu. Postoji mnogo načina da se to popravi promjenom širine tablice i drugima. Ali najdraže nam je jednostavno isključiti vodoravno pomicanje pomoću svojstva CSS 3 preljev-x

Samo dodaj overflow-x: skriven; na div, a to će ukloniti vodoravnu traku za pomicanje. Obavezno testirajte ovo, jer možda postoji sadržaj koji nestaje.

Firefox podržava upotrebu oznaka TBODY za preljev

Jedna jako lijepa značajka preglednika Firefox je ta što svojstvo overflow možete koristiti na oznakama unutarnje tablice poput tbody i thead ili tfoot. To znači da možete postaviti trake za pomicanje na sadržaj tablice, a ćelije zaglavlja ostati usidrene iznad njih. To radi samo u Firefoxu, što je šteta, ali dobra je značajka ako vaši čitatelji koriste samo Firefox. Pregledajte ovaj primjer u Firefoxu da biste vidjeli na što mislim.

... ImePhoneJennifer502-5366. 

...