Debordare - CSS-Tricks

De overflowControalele de proprietate ce se întâmplă cu un conținut care iese în afara limitelor sale: imaginați - vă o , divîn care ați setat în mod explicit să fie 200px larg, dar conține o imagine care este 300px largă. Această imagine va ieși din div și va fi visibleîn mod implicit. În timp ce dacă setați overflowvaloarea la hidden, imaginea se va întrerupe la 200 px.

div ( overflow: visible | hidden | scroll | auto | inherit )

Valori

• visible: conținutul nu este decupat atunci când se desfășoară în afara casetei sale. Aceasta este valoarea implicită a proprietății
• hidden: conținutul debordant va fi ascuns.
• scroll: similar cu ascuns, cu excepția utilizatorilor, vor putea derula prin conținutul ascuns
• auto: dacă conținutul se desfășoară în afara casetei sale, acel conținut va fi ascuns în timp ce o bară de derulare ar trebui să fie vizibilă pentru ca utilizatorii să citească restul conținutului.
• initial: folosește valoarea implicită care este visible
• inherit: setează depășirea la valoarea elementului său părinte.

Amintiți-vă că textul se va înfășura în mod natural la sfârșitul unui element (cu excepția cazului în care spațiul alb este modificat), astfel încât textul va fi rar cauza depășirii. Cu excepția cazului în care este setată o înălțime, textul va împinge doar un element mai înalt. Overflow-ul intră în joc mai frecvent atunci când sunt setate lățimi și înălțimi explicite și nu ar fi de dorit ca orice conținut să se extindă sau când se evită defilarea în mod explicit.

Vizibil

Dacă nu setați deloc proprietatea de revărsare, valoarea implicită este vizibilă. Deci, în general, nu există niciun motiv pentru a seta în mod explicit această proprietate la vizibilă, cu excepția cazului în care o suprascrieți din a fi setată în altă parte.

Important de reținut aici este că, chiar dacă conținutul este vizibil în afara casetei, acel conținut nu afectează fluxul paginii. De exemplu:

În general, nu ar trebui să setați înălțimi statice pe casetele cu text web în ele oricum, deci nu ar trebui să apară.

Ascuns

Opusul vizibilului implicit este ascuns . Acest lucru ascunde literalmente orice conținut care se extinde dincolo de cutie.

Acest lucru este deosebit de util în cazul utilizării cu conținut dinamic și posibilitatea unei revărsări care să provoace probleme serioase de aspect. Cu toate acestea, rețineți că conținutul ascuns în acest mod este complet inaccesibil (în afară de a vizualiza sursa). Deci, de exemplu, un utilizator are dimensiunea implicită a fontului setată mai mare decât v-ați aștepta, este posibil să împingeți textul în afara unei casete și să îl ascundeți complet de vizualizarea lor.

Sul

Setarea valorii de depășire a unei casete pentru derulare va ascunde conținutul de la redare în afara casetei, dar va oferi bare de derulare pentru a derula interiorul casetei pentru a vizualiza conținutul.

De remarcat cu această valoare este că obțineți ambele bare de derulare orizontale și verticale indiferent de ce, chiar dacă conținutul necesită doar una sau alta.

Defilarea impulsului iOS poate fi activată pentru această valoare cu -webkit-overflow-scrolling.

Notă: În OS X Lion, când barele de defilare sunt setate să se afișeze numai atunci când sunt utilizate, scrollse comportă mai mult auto, în sensul că vor apărea doar barele de defilare necesare.

Auto

Depășirea automată este foarte asemănătoare cu valoarea de derulare, doar că rezolvă problema obținerii de bare de derulare atunci când nu aveți nevoie de ele. Barele de defilare vor apărea numai dacă există conținut care de fapt iese din element.

overflow-x și overflow-y

De asemenea, este posibil să se manipuleze deversarea conținutului pe orizontală sau verticală cu proprietățile overflow-xși overflow-y. De exemplu, în demonstrația de sub depășirea orizontală poate fi parcurs în timp ce textul care se extinde dincolo de înălțimea casetei este ascuns:

.box ( overflow-y: hidden; overflow-x: scroll; )

Clearing Float

Una dintre cele mai populare utilizări de setare a revărsării, destul de ciudat, este compensarea cu flotare. Setarea revărsării nu elimină plutitorul de la element, ci se auto-șterge. Aceasta înseamnă că elementul cu preaplin (orice valoare cu excepția visible) se va extinde pe cât de mare este necesar pentru a cuprinde elemente copil în interior care sunt plutite (în loc să se prăbușească), presupunând că înălțimea nu este declarată. Ca aceasta:

O tehnică mai bună de compensare a flotării este clearfix, deoarece nu necesită modificarea proprietății de revărsare într-un mod de care nu aveți nevoie.

Generarea contextului de formatare a blocurilor

Este interesant de remarcat faptul că overflowva crea, de asemenea, un nou context de formatare a blocului, care este util dacă dorim să aliniați un element de bloc lângă unul plutit. În exemplul de mai jos arătăm cum un număr de paragrafe vor interacționa în mod implicit cu o imagine plutită și apoi vom folosi overflow: hiddenpentru a alinia textul în propria casetă:

Acest lucru vine dintr-o postare excelentă a lui Nicole Sullivan, care a inspirat obiectul media.

Barele de defilare pot fi stilizate cu CSS?

Obișnuiai să poți stiliza barele de derulare în IE (v5.5?), Dar nu mai mult. Le puteți stiliza din nou acum în browserele WebKit. Dacă aveți nevoie de bare de defilare personalizate pentru mai multe browsere, căutați la JavaScript.

Dacă un element trebuie să aibă bare de defilare atașate pentru a respecta valoarea depășirii, Firefox le plasează în afara elementului, păstrând lățimea / înălțimea vizibilă așa cum a fost declarat. IE pune barele de derulare în interior, păstrând lățimea / înălțimea totală așa cum a fost declarat.

Demo

Demonstrații pentru acest articol preluate din acest exemplu de pagină.

Suport pentru browser

Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.

Desktop

Crom	Firefox	IE	Margine	Safari
91	87	11	88	TP

Mobil / Tabletă

Android Chrome	Android Firefox	Android	Safari iOS
88	85	81	14.0-14.4

Legate de

• Proprietatea float

Mai multe informatii

• Înțelegerea Humble Clearfix
• Overflow: un beneficiu secret
• Overflow pe MDN
• Overflow pe W3C
• Găsirea / remedierea depășirii neintenționate a corpului