Să vedem un exemplu clasic de element care este foarte mic pentru conținutul său și care generează un overflow, deoarece totul este mai ușor de văzut prin exemple, mai întâi să vedem unul înainte de a continua să vedem proprietățile care ne ajută să controlăm overflow-ul.
ExempluExistă o mulțime de feluri diferite de fructe - există peste 500 de soiuri de banane numai. Până când adăugăm nenumăratele tipuri de mere, portocale și alte fructe cunoscute, ne confruntăm cu mii de alegeri.
Codul anterior generează următorul rezultat în browser:
overflow-x / overflow-y: Ele determină comportamentul revărsării orizontale sau verticale.
Revărsare: Este o comandă rapidă pentru a utiliza proprietatea anterioară și ordinea în care funcționează este overflow, overflow x, overflow y.
Proprietățile care pot fi utilizate cu elementul revărsare sunt după cum urmează:mașină: Această valoare delegă browserului responsabilitatea de a decide ce să facă, de obicei, ceea ce se întâmplă este că o bară de derulare este afișată atunci când elementul începe să se revărse care îl conține.
ascuns: Conținutul este afișat până la partea care nu se revarsă, ascunzând restul conținutului, nu are mecanisme pentru a spune utilizatorului ce trebuie să facă pentru a vedea restul conținutului.
fara continut: Conținutul debordat este eliminat dacă nu poate fi adăugat în container. Această valoare nu este acceptată de niciunul dintre cele mai populare browsere
fără afișare: Conținutul este ascuns dacă nu poate fi afișat complet. Această valoare nu este acceptată de niciunul dintre cele mai populare browsere.
sul: Browserul generează o bară de derulare care permite utilizatorului să vadă întotdeauna conținutul debordat din interiorul containerului. Bara va depinde de browser și de sistem pentru a defini modul în care este afișată. Bara de defilare va fi întotdeauna vizibilă chiar dacă elementul nu se revarsă.
vizibil: Aceasta este valoarea implicită. Conținutul este afișat întotdeauna chiar dacă se revarsă.
Acum că avem instrumentele pentru a ataca o revărsare, să vedem în practică cum o putem aplica, nimic mai bun decât un mic cod care să o demonstreze:ExempluExistă o mulțime de feluri diferite de fructe - există peste 500 de soiuri de banane numai. Până când adăugăm nenumăratele tipuri de mere, portocale și alte fructe cunoscute, ne confruntăm cu mii de alegeri.
Există o mulțime de feluri diferite de fructe - există peste 500 de soiuri de banane numai. Până când adăugăm nenumăratele tipuri de mere, portocale și alte fructe cunoscute, ne confruntăm cu mii de alegeri.
Am folosit două elemente pentru a demonstra modul în care revărsare, în prima plasăm proprietatea ascuns unde știm că numai conținutul va fi afișat până unde începe deversarea, apoi restul este ascuns și pentru al doilea vom folosi scroll, cu care se va afișa o bară de scroll, indiferent dacă elementul se revarsă sau nu, să vedem rezultatul:
