Defilare orizontală css. Defilare div

Să ne uităm la modul în care regula de depășire CSS (folosind valorile sale ascunse, vizibile, de defilare și automate) poate manipula conținutul dacă nu se încadrează în zona alocată.

În practică (în timpul layout-ului sau al editării), astfel de situații sunt adesea întâlnite, așa că va fi util multora. Mai mult, pe parcurs, vom atinge variațiile a acestei proprietati overflow-x și overflow-y, care sunt un caz special și au propriile lor particularități. Vom atinge și regula text-overflow adiacentă, care determină vizibilitatea textului într-un bloc care depășește limitele unui element.

Desigur, în multe cazuri, nu se poate face fără a specifica dimensiunile specifice zonei prin lățimea și înălțimea (lățimea și înălțimea cutiei) pe care le poate lua. În general, vom lua în considerare mai jos exemple de efect al proprietății de overflow în toate modurile posibile.

Overflow (vizibil, ascuns) - conținut vizibil sau ascuns al unui bloc care depășește limitele sale

Mai întâi, urmând tradiția, să vedem ce valori sunt în vigoare în tabelul de specificații al Consorțiului Internațional W3C (datele sunt prezentate conform versiunii CSS2.1, deși sunt valide și acceptate în mai multe versiune noua CSS3):

După cum puteți vedea, overflow-ul are 4 parametri principali (vizibil, ascuns, automat, scroll) și moșteniți valoare, pe care îl puteți scrie dacă doriți să îl atribuiți, dar implicit această regulă nu este moștenită ( moștenit: nuîn captură de ecran). Valoarea implicită este vizibill (inițial: vizibil).

Înainte de a continua explorarea cu exemple practice, hai să obținem câteva detalii pentru noi înșine. După cum am menționat mai sus, regula de depășire vă permite să controlați conținutul element blocîn cazurile în care nu se încadrează în ea. Acest lucru decurge direct din numele acestuia reguli CSS(overflow în engleză înseamnă overflow, exces.)

Anterior, vă puteți familiariza cu ce constă făcând clic pe linkul furnizat. În plus, va fi util să parcurgeți materialul, ceea ce oferă elementelor de pe blocul paginii caracteristici.

Să luăm ca exemplu un container DIV (mai detaliat despre div-uri ca bază aspectul blocului), colorează-l cu fundal, prin atributul style, și plasează-l în interior text arbitrar:

Rezultatul final va fi cam așa:

Nu am definit lățimea containerului. În acest caz, dacă vă amintiți, elementul bloc ocupă tot spațiul disponibil în lățime. Dar înălțimea (înălțimea) blocului, dacă nu este specificată, este determinată de conținut (în exemplul nostru, textul prezent acolo).

Regula de depășire pentru blocurile care conțin conținut care nu poate fi distribuit în înălțime

Mai sus, am sugerat un exemplu în care un element de bloc conține text care poate fi redistribuit atunci când lățimea este limitată (prin schimbarea învelișului cuvântului). Acest lucru este acum valabil mai ales atunci când aplicați design receptiv pentru vizionare pe telefoanele mobile. Cu toate acestea, se întâmplă ca conținutul, dintr-un motiv sau altul, să nu fie atât de flexibil.

Să începem cu aceleași condiții ca în exemplul pe care l-am discutat mai sus. Amintiți-vă, când ați specificat o lățime fixă ​​a blocului, conținutul a fost redistribuit astfel încât să nu depășească chenarul orizontal, dar în același timp a mărit înălțimea containerului (împreună cu conținutul) pe verticală. Acum să schimbăm conținutul și să înlocuim textul standard cu cuvinte lungi fără spații, specificând lățimea:

Observați că conținutul a depășit imediat chenarul orizontal atunci când a fost constrâns la lățime. Și dacă scriem overflow ascuns, atunci vom tăia conținutul:

Adăugarea defilării cu parametrii de defilare și automat ai regulii de depășire

Acum să ne uităm la cazul în care lățimea și înălțimea containerului sunt fixe, dar este de dorit să lăsați disponibil conținutul care nu se încadrează în el. Să luăm același exemplu c lățime fixăși înălțime, doar valoarea înălțimii pentru claritate o vom indica în 60px, adăugând debordare: defilare la stiluri CSS:

Ca rezultat, barele de defilare au apărut vertical și orizontal:

Astfel, conținutul devine disponibil, deși cu ajutorul derulării. Cu toate acestea, vă rugăm să rețineți că nu numai defilare verticală, care este necesar pentru vizualizarea completă, dar și orizontală, care nu este activă. Aceasta este o caracteristică a valorii de defilare.

Vreau să observ că regula stilului de bază are variații sub forma overflow-x și overflow-y, care iau aceleași valori (vizibil, ascuns, scroll, auto) ca și overflow de bază, doar setați parametri se aplică conținutului casetelor pe orizontală (x) și pe verticală (y).

Regula de depășire a textului CSS (clip, puncte suspensive)

Acum să ne familiarizăm cu modificarea proprietății de overflow descrise mai sus, care a apărut doar în CSS3. Puteți obține informații despre el pe pagina oficială corespunzătoare (schița editorială a consorțiului W3C):

Proprietate text-debordare are 2 semnificații principale (clip și elipse). Are efect numai dacă este specificat depășirea, care are o altă valoare decât cea vizibilă. Și acesta, după cum vă amintiți, este parametrul implicit, astfel încât stilurile pentru elementul corespunzător trebuie să aibă un overflow cu hidden, scroll sau auto.

Clip este implicit și doar decupează textul. Prin urmare, activăm text-overflow pentru DIV-ul nostru cu proprietățile CSS corespunzătoare adăugând spații albe: nowrap (pentru a preveni împachetarea cuvintelor):

După cum puteți vedea punctele de suspensie vă permit să adăugați puncte de suspensieîn loc de text tăiat, sugerând continuarea acestuia. Pentru a da o concluzie logică acest exemplu, puteți adăuga: pseudo-clasa hover pentru div, care schimbă stilul elementului atunci când treceți cu mouse-ul peste el:

Clasa 1: hover (overflow: vizibil; spatiu alb: normal;)

Acum textul va fi tăiat, dar dacă mutați cursorul mouse-ului peste el, va apărea în în întregime... Puteți verifica acest lucru făcând clic pe linkul furnizat.

3. Forțați derularea verticală și orizontală într-un bloc CSS
4. Exemplu de bloc div de defilare

În acest articol vom analiza problema creării unui bloc (div) de dimensiune fixă ​​cu posibilitatea de a derula orizontal și vertical. Acest lucru poate fi implementat folosind CSS... Responsabil pentru asta proprietatea de debordare.

Despre depășirea proprietății utile

Proprietate revărsare este responsabil pentru afișarea conținutului unui element bloc. Poate fi folosit atunci când conținutul nu se potrivește complet și depășește zona blocului.

preaplin-x- este responsabil pentru afișarea conținutului unui element bloc pe orizontală.
preaplin-y- este responsabil pentru afișarea conținutului unui element bloc pe verticală.

Cod CSS

Prokrutka (
preaplin: automat; / * proprietate pentru a derula orizontal. Automatizați dacă conținutul este mai mare decât blocul * /
}

Proprietăți și valori de overflow

vizibil- afișează întregul conținut al elementului, chiar și dincolo de lățimea specificată.
ascuns- este afișată doar zona din interiorul elementului, restul este ascuns.
sul- a adăugat forțat o bară de defilare orizontală (y) sau orizontală (x).
auto- adăugat automat dungă orizontală derularea dacă blocul este mai mic.

Luați în considerare un exemplu de clasă CSS. În lățime și înălțime, setăm lățimea și înălțimea dorite ale blocului (conținutul blocului nu va depăși ele), iar cu proprietatea de overflow: auto; setați derularea orizontală dacă este necesar

Cod CSS

Prokrutka (
latime: 150px; / * lățimea blocului nostru * /
înălțime: 100px; / * înălțimea blocului nostru * /


preaplin: automat; / * proprietate pentru a derula orizontal. Automat dacă există mai multe blocuri * /
}

Forțați defilarea într-un bloc CSS

De asemenea, puteți forța derularea în înălțime și lățime. Pentru a face acest lucru, fiecare axă: overflow-y: scroll; (vertical) overflow-x: scroll; (orizontal) specificam parametrul de defilare, defilare fortata.

Cod HTML și CSS

Prokrutka (
înălțime: 150px; / * înălțimea blocului nostru * /
fundal: #fff; / * culoare de fundal, alb * /
chenar: 1px solid # C1C1C1; / * dimensiunea și culoarea chenarului blocului * /


}

Exemplu de bloc div de defilare

Cod HTML și CSS

Una dintre proprietăți revărsare poate fi eliminat, atunci va exista derulare doar de-a lungul unei axe, ceea ce este suficient.
Vedeți lucrarea de script De exemplu de mai jos.

Instrucțiuni

Utilizați o etichetă div dacă doriți o bară de derulare nu pentru întreaga pagină, ci doar pentru o zonă limitată a acesteia. V limbaj HTML(HyperText Markup Language - „Hypertext Markup Language”) „Etichete” se referă la comenzi individuale pentru browser pentru a afișa un anumit element al paginii. În chiar formă simplă o etichetă div (denumită adesea „strat”) astfel:

Aici - inchidere. Tot ceea ce este plasat între etichetele de deschidere și de închidere se află în strat ca și în container și acest container poate fi dimensionat - lățime și înălțime. Acest lucru se face cu parametru suplimentar(„Atribut”) stil care urmează etichetei de deschidere: