Własność CSS overflow

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:

• overflow-x
• overflow-y

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ści scroll, 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ści overflow 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.
• hidden: treść nadmiarowa zostaje ukryta. Nie pojawiają się żadne paski przewijania i użytkownik strony nie ma dostępu do schowanej treści. Można natomiast odnieść się do niej z poziomu skryptów, w związku z czym element z takim ustawieniem jest kontenerem przewijanym. Zobacz przykład użycia własności overflow z wartością hidden 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ści overflow. 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:

Zastosowanie

Własność CSS overflow ma zastosowanie do kontenerów blokowych, flex i siatkowych (ang. grid).

Podsumowanie