overflow
Decyduje, co zrobić z treścią, która nie mieści się w elemencie.
- Wartość domyślna
visible- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- kontenery blokowe, kontenery flex i grid
- JavaScript
element.style.overflow = "auto"
Przykład
#.table-wrapper {
overflow-x: auto;
}<div class="table-wrapper stage">
<table style="min-width: 520px; border-collapse: collapse;">
<tr><th align="left">Kurs</th><th align="left">Moduły</th><th align="left">Zadania</th><th align="left">Poziom</th></tr>
<tr><td>HTML i CSS</td><td>11</td><td>738</td><td>Początkujący</td></tr>
</table>
</div>Definicja i zastosowanie
#Właściwość overflow określa zachowanie treści, która wychodzi poza wymiary elementu. Domyślnie (visible) wystaje ona na zewnątrz. Można ją też przyciąć, pokazać paski przewijania zawsze albo tylko wtedy, gdy są potrzebne.
To skrót dla overflow-x i overflow-y. Podając dwie wartości, ustawisz osobno oś poziomą i pionową, na przykład przewijanie tylko w poziomie dla szerokiej tabeli.
Wartości inne niż visible i clip tworzą nowy kontener przewijania. Ma to skutki uboczne: na przykład przodek z overflow: hidden wyłącza działanie position: sticky u potomków.
Składnia
#overflow: visible | hidden | clip | scroll | auto (1–2 wartości);Wartości
#- Treść wystaje poza element.
- Nadmiar treści jest przycięty, ale da się go przewinąć skryptem.
- Pasek przewijania pojawia się tylko wtedy, gdy treść się nie mieści.
- Paski przewijania są widoczne zawsze (zależnie od systemu).
- Przycina bez tworzenia kontenera przewijania, więc nie psuje
position: sticky.
Wartości w praktyce
#visible
.demo { overflow: visible; }auto
.demo { overflow: auto; }scroll
.demo { overflow: scroll; }clip
position: sticky..demo { overflow: clip; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Szerokie tabele na telefonach opakuj w element z
overflow-x: auto, zamiast ściskać kolumny. - Jeśli
position: stickyprzestało działać, poszukaj przodka zoverflow: hiddeni zamień go naoverflow: clip.
Powiązane hasła
#- max-heightUstala maksymalną wysokość elementu.
- text-overflowDecyduje, jak oznaczyć tekst ucięty na końcu linii, na przykład wielokropkiem.
- positionWybiera sposób pozycjonowania elementu: w przepływie, względnie, absolutnie, na stałe lub przyklejony.
- overscroll-behaviorZapobiega przewijaniu całej strony po dojściu do końca przewijanego elementu.
- overflow-xDecyduje, co zrobić z treścią wystającą w poziomie. Bliźniacza overflow-y robi to samo w pionie.
Widzisz błąd albo brakuje przykładu? Napisz do nas.