Ce face overflow (hidden, scroll, auto)
Dacă un text lung sau o imagine depășește lățimea sau înălțimea fixată a unui container, overflow dictează reacția browserului.
• visible (implicit): conținutul se revarsă în afara cutiei, scriindu-se peste alte elemente.
• hidden: excesul este tăiat invizibil (folosit și pentru a tăia colțurile imaginilor din carduri rotunjite).
• auto: recomandat: adaugă bare de derulare doar dacă și când este strict necesar.
• overflow-x: auto: tehnica standard pentru a face tabelele mari să fie derulabile orizontal pe ecranul unui telefon mobil, fără a strica lățimea întregii pagini.
Valori uzuale
| Valoare | Descriere |
|---|---|
visible |
Implicit: conținutul revărsat rămâne vizibil în afara cutiei. |
hidden |
Taie conținutul care depășește dimensiunile containerului. |
auto |
Afișează bare de derulare doar dacă conținutul nu încape. |
scroll |
Afișează întotdeauna bara de derulare. |
overflow-x / y |
Controlează separat axa orizontală sau verticală. |
Exemple
Exemplul 1: Tabel mare adaptat pe telefon prin container derulabil
Permite glisarea tabelului pe orizontală fără să strice restul paginii.
.tabel-responsiv {
overflow-x: auto;
width: 100%;
border: 1px solid #e2e8f0;
}Efect vizual în browser
Pe ecrane înguste de telefon, tabelul poate fi glisat cu degetul spre stânga și dreapta în interiorul casetei sale.Greșeli frecvente
- Folosirea overflow: scroll în loc de overflow: auto; scroll forțează afișarea barei chiar și atunci când conținutul ar încăpea perfect.
- Tăierea accidentală a meniurilor dropdown sau a umbrelor (box-shadow) prin punerea neatentă a lui overflow: hidden pe containerul părinte.
Comenzi înrudite
width și height (min/max): Controlează dimensiunile orizontale și verticale ale unui element, inclusiv limitele minime și maxime permise.display (block, inline, inline-block, none): Stabilește tipul de cutie al elementului în fluxul paginii sau îl ascunde complet din document.