Horizontalno pomicanje css. Div sa svitkom

Pogledajmo kako pravilo prelijevanja CSS-a (koristeći njegove skrivene, vidljive, pomične i automatske vrijednosti) može kontrolirati sadržaj ako ne stane unutar predviđenog područja.

U praksi (tijekom prijelaza ili editiranja) ovakve situacije se često događaju pa će ovo mnogima biti od koristi. Štoviše, usput ćemo se dotaknuti varijacija ovog posjeda overflow-x i overflow-y, koji su poseban slučaj i imaju svoje karakteristike. Dotaknimo se i povezanog pravila prelijevanja teksta, koje određuje način vidljivosti teksta u bloku koji se proteže izvan granica elementa.

Naravno, u mnogim je slučajevima nemoguće učiniti bez navođenja specifičnih dimenzija područja pomoću širine i visine (širina i visina bloka), što može potrajati . Općenito, u nastavku ćemo razmotriti primjere djelovanja svojstva overflow u svim mogućim varijantama.

Preljev (vidljiv, skriven) - vidljiv ili skriven sadržaj bloka koji se proteže izvan njegovih granica

Prvo, slijedeći tradiciju, pogledajmo koje su vrijednosti važeće u tablici W3C specifikacije (podaci su prikazani prema CSS2.1, iako su valjani i podržani u više nova verzija CSS3):

Kao što vidite, overflow ima 4 glavna parametra (vidljiv, skriven, automatski, pomicanje) i naslijediti vrijednost, koji se po želji može navesti, ali prema zadanim postavkama ovo se pravilo ne nasljeđuje ( naslijeđeno: br na snimci zaslona). Zadana vrijednost je vidljiv (početno: vidljiv).

Prije početka istraživanja sa praktični primjeri, razjasnimo neke detalje za sebe. Kao što je gore spomenuto, pravilo prelijevanja omogućuje vam kontrolu sadržaja blok element u slučajevima kada se ne uklapa u njegove granice. To izravno proizlazi iz naslova ovoga CSS pravila(overflow na engleskom znači prelijevanje, višak.)

Unaprijed se možete upoznati s onim što se sastoji slijedeći priloženu poveznicu. Osim toga, bilo bi korisno baciti pogled na materijal o, koji elementima na stranici daje karakteristike bloka.

Uzmimo DIV spremnik kao primjer (više o divovima kao osnovi raspored blokova), tonirajte ga pomoću pozadine, kroz atribut stila, i stavite ga unutra slobodan tekst:

Konačni rezultat će biti otprilike ovako:

Nismo definirali širinu kontejnera. U ovom slučaju, ako se sjećate, blok element zauzima sav prostor koji mu je dostupan u širini. Ali visina bloka, ako nije navedena, određena je upravo sadržajem (u našem primjeru, tekstom koji se tamo nalazi).

Pravilo prelijevanja za blokove koji sadrže sadržaj koji se ne može rasporediti po visini

Gore sam ponudio primjer gdje blok element sadrži tekst koji se, kada je ograničen u širini, može redistribuirati (promjenom prijeloma riječi). To je osobito istinito sada kada se koristi adaptivni dizajn za gledanje na mobitelu. Međutim, događa se da sadržaj, iz ovog ili onog razloga, nema takvu fleksibilnost.

Počnimo s istim uvjetima kao u primjeru o kojem smo raspravljali gore. Kao što se sjećate, prilikom određivanja fiksne širine bloka, sadržaj je redistribuiran na takav način da nije prelazio vodoravnu granicu, ali je istodobno povećavao visinu spremnika (zajedno sa sadržajem) okomito. Sada promijenimo sadržaj i zamijenimo standardni tekst dugim riječima bez razmaka koji označavaju širinu:

Imajte na umu da sadržaj sada odmah prelazi horizontalne granice kada je širina ograničena. A ako napišemo overflow hidden, time ćemo odrezati sadržaj:

Dodavanje pomicanja pomoću pomicanja i auto parametara pravila prelijevanja

Pogledajmo sada slučaj gdje su širina i visina spremnika fiksne, ali je preporučljivo ostaviti sadržaj koji u njega ne stane dostupan. Uzmimo isti primjer c fiksna širina i visina, samo će vrijednost visine biti postavljena na 60px radi jasnoće, dodavanje overflow:scroll na CSS stilove:

Kao rezultat toga, klizači su se pojavili okomito i vodoravno:

Dakle, sadržaj postaje dostupan, ali kroz skrolanje. Međutim, imajte na umu da nije samo formirana okomito pomicanje, koji je potreban za puni pregled, ali i horizontalni, koji nije aktivan. Ovo je značajka vrijednosti pomicanja.

Želio bih napomenuti da pravilo osnovnog stila ima varijacije u obliku overflow-x i overflow-y, koje uzimaju iste vrijednosti (vidljivo, skriveno, pomicanje, auto) kao i osnovno preljev, samo navedenim parametrima primijeniti na sadržaj blokova vodoravno (x) i okomito (y).

CSS pravilo prelijevanja teksta (isječak, elipsa).

Sada se upoznajmo s gore opisanom izmjenom svojstva overflow, koja se pojavila samo u CSS3. Informacije o tome mogu se pronaći na odgovarajućoj službenoj stranici (W3C urednički nacrt):

Vlasništvo tekst-preljev ima 2 glavna značenja (isječak i elipsa). Djeluje samo ako je navedeno prekoračenje, vrijednost koja nije vidljiva. I ovo je, kao što se sjećate, zadani parametar, tako da stilovi za odgovarajući element moraju imati preljev sa skrivenim, pomicanjem ili automatskim.

Isječak je zadana vrijednost i jednostavno skraćuje tekst. Stoga, upotrijebimo text-overflow za naš DIV s odgovarajućim CSS svojstvima, dodajući white-space:nowrap (kako bismo onemogućili prelamanje riječi):

Kao što vidiš, ellipsis vam omogućuje dodavanje elipse umjesto obrezanog teksta, nagovještavajući njegov nastavak. Da dam logičan zaključak ovaj primjer, možete dodati pseudo-class:hover za div, koji mijenja stil elementa kada prijeđete pokazivačem iznad njega:

Klasa1: lebdjeti (preljev: vidljiv; razmak: normalno;)

Sada će tekst biti odrezan, ali ako prijeđete mišem preko njega, pojavit će se u cijelosti. To možete provjeriti slijedeći priloženu poveznicu.

3. Prisilno okomito i vodoravno pomicanje u CSS bloku
4. Primjer pomicanja diva

U ovom ćemo članku razmotriti pitanje stvaranja bloka (div) fiksne veličine s mogućnošću vodoravnog i okomitog pomicanja. Ovo se može provesti koristeći CSS. Odgovoran za ovo svojstvo preljeva.

O svojstvu korisnog preljeva

Vlasništvo prelijevanje odgovoran je za prikaz sadržaja blok elementa. Može se koristiti kada sadržaj ne stane u potpunosti i nadilazi područje bloka.

preljev-x- odgovoran je za vodoravni prikaz sadržaja blok elementa.
preljev-y- odgovoran je za vertikalni prikaz sadržaja blok elementa.

CSS kod

Prokrutka (
preljev: automatski; /* svojstvo za horizontalno pomicanje. Automatski ako je sadržaj veći od bloka */
}

svojstva i vrijednosti preljeva

vidljivo- prikazuje se cijeli sadržaj elementa, čak i izvan zadane širine.
skriven- prikazuje se samo područje unutar elementa, ostalo je skriveno.
svitak- nasilno dodaje vodoravnu (y) ili vodoravnu (x) traku za pomicanje.
auto- automatski dodano horizontalna pruga pomicanje ako je blok manji.

Razmotrite primjer CSS klase. U širini i visini postavljamo širinu i visinu bloka koji nam je potreban (sadržaj bloka neće izlaziti izvan njih), a svojstvom overflow: auto; postavite vodoravno pomicanje ako je potrebno

CSS kod

Prokrutka (
širina:150px; /* širina našeg bloka */
visina:100px; /* visina našeg bloka */


preljev: automatski; /* svojstvo za horizontalno pomicanje. Automatski, ako ima više od bloka */
}

Prisilno pomicanje u CSS bloku

Također možete prisilno pomicati da odgovara visini i širini. Za ovo, svaka os: overflow-y: scroll; (vertikalno) overflow-x: pomicanje; (horizontalno) odredite parametar pomicanja, prisilno pomicanje.

HTML i CSS kod

Prokrutka (
visina:150px; /* visina našeg bloka */
pozadina: #fff; /* boja pozadine, bijela */
rub: 1px puni #C1C1C1; /* veličina i boja ruba bloka */


}

Primjer pomicanja diva

HTML i CSS kod

Jedno od svojstava prelijevanje može ukloniti, tada će biti samo pomicanje po jednoj osi, što je sasvim dovoljno.
Pogledajte skriptu na djelu Na primjer ispod.

upute

Upotrijebite oznaku div ako ne trebate traku za pomicanje za cijelu stranicu, već samo za njezino ograničeno područje. U HTML jezik(HyperText Markup Language - “jezik za označavanje hiperteksta”) “oznake” su pojedinačne naredbe pregledniku za prikaz određenog elementa stranice. U samom u jednostavnom obliku div oznaka (često se naziva "sloj") ovako:

Ovdje - zatvaranje. Sve što se nalazi između otvarajućeg i zatvarajućeg taga nalazi se u sloju kao u spremniku, a tom spremniku se mogu zadati dimenzije - širina i visina. To se radi pomoću dodatni parametar("atribut") stil, koji slijedi u početnoj oznaci: