overflow kontroliuoja, kas nutinka, kai turinys yra per didelis savo langeliui — ar jis būna apkirptas, slinkinėja, ar išsilieja lauk.
{ : visible; }
{ : hidden; }
{ : scroll; }
{ : auto; }
overflow kontroliuoja, kas nutinka, kai turinys yra per didelis savo langeliui — ar jis būna apkirptas, slinkinėja, ar išsilieja lauk.
{ : visible; }
{ : hidden; }
{ : scroll; }
{ : auto; }
.box {
overflow-x: hidden; /* clip horizontal */
overflow-y: auto; /* scroll vertical when needed */
}
Bendra praktika: užkirsti horizontalų perpilimą, leidžiant vertikalų slinkimą.
.scroll-area {
max-height: 400px; /* constrain the height */
overflow-y: auto; /* content beyond 400px scrolls */
}
Svarbu: slinkimo konteineriui reikalinga suvaržyta dydžio (height/max-height) ir overflow: auto. Be dydžio apribojimo, langelis tiesiog augdamas niekada neslinkina.
.clearfix { overflow: hidden; } /* contains floats / stops margin collapse */
Nustatę overflow į bet ką, išskyrus visible, nustatysite naują blokinio formatavimo kontekstą, kuris sudraudžia plaukiojančius vaikus ir nustabdo paragrafo tarpų suglaudimą — istoriškai naudojant kaip "clearfix".
.gallery {
overflow-x: auto;
scroll-snap-type: x mandatory; /* snap to items while scrolling */
overscroll-behavior: contain; /* stop scroll "chaining" to the page */
}
.gallery > * { scroll-snap-align: start; }
scroll-snap sukuria karuselius be JS; overscroll-behavior sustabdo slinkinę sritį nuo to, kad ji taip pat slintų svetainės dalį už jos (puiku modalams/pokalbių langams).
overflow valdo slinkimo sritis, teksto apkirpimą (naudojant text-overflow: ellipsis) ir modalų/panelių slinkimo elgesį.
Žinojimas, kad slinkimo konteineriai reikalingi dydžio apribojimui, kad overflow sukuria formatavimo kontekstą, ir šiuolaikinės pagalbinės priemonės (scroll-snap, overscroll-behavior) apima praktines maketavimo ir UX poreikius aplink perpilimą.