Właściwość overflow pozwala na zdefiniowanie, co się dzieje z treścią która jest zbyt duża, i nie mieści się w elemencie nadrzędnym.
Jakie wartości może przyjmować overflow?
overflow definiuje, czy treść która nie mieści się na ekranie, ma zostać ukryta, bądź też czy powninien zostać dodany pasek przewijania na danym elemencie.
Właściwość ta, może przyjmować następujące wartości:
visible- zachowanie domyślne. Treść, która się nie mieści jest widoczna i wystaje poza element nadrzędny.hidden- treść która się nie mieści będzie niewidoczna.scroll- do elementu zawsze jest dodawany pasek przewijania.auto- zachowanie podobne jak do wartościscroll. W tym wypadku również dodawany jest pasek przewijania, ale tylko w wypadku gdy treść się nie mieści.
overflow działa tylko dla elementów blokowych o ustalonech wysokości. Jeżeli nie ustalisz wysokości, to wielkość elementu dopasuje się automatycznie, a pasek przewijania będzie wyszarzony.overflow: visible
Domyślnie treści wystające poza kontener są widoczne (mają wartość visible). Domyślne zachowanie ilustuje poniższy przykład:
overflow: hidden
Jeżeli chcesz ukryć treść wystającą poza kontener, wystarczy ustawić overflow: hidden;
overflow: scroll
Jeżeli chcesz, to możesz równiez dodać pasek przewijania. Dzięki temu treści, które się nie mieszczą, będą widoczne po urzyciu pokrętła myszy.
Pamiętaj, że w tym przypadku, paski przewijania będą zawsze widoczne, nawet jeżeli treść mieści się na ekranie.
overflow: auto
overflow: auto; zachowuje się bardzo podobnie jak w poprzednim przykładzie wartość scroll.
Różnica polega na tym, że pasek przewijania pojawi się tylko, jeżeli treść się nie mieści. Ponadto w poniższym przykładzie, pojawi się tylko pionowy pasek przewijania, bo poziomy nie jest potrzebny w tym przypadku.