Własność CSS overflow określa, co dzieje się z treścią, która nie mieści się w zawierającym ją elemencie. Do takiej sytuacji najczęściej dochodzi w przypadkach, gdy element zawierający treść ma w jakiś sposób określoną szerokość lub wysokość albo jedno i drugie bądź ma wyłączone łamanie wierszy za pomocą ustawienia własności white-space
na nowrap
.
Jest to własność zbiorcza CSS obejmująca następujące własności indywidualne:
Wartości i składnia
Własność CSS overflow
przyjmuje jedno lub dwa słowa kluczowe z następującego zestawu: visible
, hidden
, clip
, scroll
, auto
.
Jeśli podana jest jedna wartość, to zostaje ona użyta jako wartość zarówno własności overflow-x
, jak i overflow-y
.
Jeśli podane są dwie wartości, to pierwsza odnosi się do własności overflow-x
(przepełnienie w poziomie), a druga do własności overflow-y
(przepełnienie w pionie).
Poniżej znajduje się opis poszczególnych słów kluczowych, których można używać jako wartości własności overflow.
auto
: jeśli treść nie mieści się w elemencie, to przeglądarka, zależnie od potrzeby, wyświetla pasek lub paski przewijania pozwalające obejrzeć całą treść poprzez jej przewijanie. W przypadku tej wartości, inaczej niż w przypadku wartościscroll
, paski przewijania są wyświetlane tylko wtedy, gdy są potrzebne. Zobacz przykład użycia własności overflow z wartością auto poniżej.clip
: powoduje ucięcie nadmiarowej treści w miejscu krawędzi odcięcia nadmiaru, którą definiuje własnośćoverflow-clip-margin
, jeśli jest zdefiniowana. Element z takim ustawieniem własnościoverflow
nie jest kontenerem przewijanym i nie pozwala na przewijanie treści w żaden sposób, nawet za pomocą skryptów. Zobacz przykład użycia własności overflow z wartością clip poniżej.scroll
: oba paski przewijania są widoczne zawsze, nawet kiedy treść w całości mieści się w elemencie. Element z takim ustawieniem jest kontenerem przewijanym. Zobacz przykład użycia własności overflow z wartością scroll poniżej.visible
: to jest ustawienie domyślne własnościoverflow
. Powoduje, że cała treść jest widoczna, nawet jeśli wychodzi poza element, który w takim przypadku nie jest kontenerem przewijanym. Zobacz przykład użycia własności overflow z wartością visible poniżej.
Przykłady
Słowo kluczowe visible
W poniższym przykładzie element aside
zawiera więcej treści niż jest w stanie pomieścić.
<style>
aside {
width: 300px;
height: 150px;
border: 1px solid red;
}
</style>
<aside>Lorem ipsum dolor sit ameflksdjflkdsjlfkjsdalfdersrfewrferewsrwereswrewrjdslfjdslfjlj. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</aside>
Efekt:

Ponieważ nie ma wprost zdefiniowanej własności overflow
, została jej nadana wartość domyślna visible
, która powoduje, że nadmiarowa treść „wystaje” poza krawędzie elementu.
Słowo kluczowe auto
W tym przykładzie element aside
zawiera więcej treści niż jest w stanie pomieścić, ale ma zdefiniowaną własność overflow
o wartości auto
.
<style>
aside {
width: 300px;
height: 150px;
border: 1px solid red;
overflow: auto;
}
</style>
<aside>Lorem ipsum dolor sit ameflksdjflkdsjlfkjsdalfdersrfewrferewsrwereswrewrjdslfjdslfjlj. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</aside>
Efekt:

W tym przypadku przeglądarka wyświetliła oba paski przewijania, ponieważ treść nie mieści się w elemencie zarówno w poziomie, jak i w pionie.
Słowo kluczowe clip
W tym przykładzie własność overflow
elementu aside
ma wartość clip
, dzięki czemu nadmiarowa treść zostaje ucięta i przeglądarka nie wyświetla żadnych pasków przewijania. Wizualnie taki sam efekt otrzymalibyśmy przy zastosowaniu wartości hidden
własności overflow
. Zobacz opisy wartości clip
i hidden
, aby dowiedzieć się, czym się różnią.
<style>
aside {
width: 300px;
height: 150px;
border: 1px solid red;
overflow: auto;
}
</style>
<aside>Lorem ipsum dolor sit ameflksdjflkdsjlfkjsdalfdersrfewrferewsrwereswrewrjdslfjdslfjlj. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</aside>
Efekt:

Słowo kluczowe scroll
W tym przypadku przeglądarka wyświetli oba paski przewijania, mimo że element nie zawiera nadmiarowej treści.
<style>
aside {
width: 300px;
height: 150px;
border: 1px solid red;
overflow: scroll;
}
</style>
<aside>Lorem ipsum dolor sit amet.</aside>
Efekt:

Podsumowanie
Zastosowanie | Kontenery blokowe, kontenery flex i kontenery grid |
---|---|
Własności składowe | |
Obsługiwane wartości | Słowa kluczowe: visible , hidden , clip , scroll , auto |
Wartość początkowa | visible |
Dziedziczenie | Nie |
Specyfikacja | CSS Overflow Module Level 3 |