Przepełnienie - overflow CSS

W tym artykule omówię właściwość przepełnienie – overflow CSS, która kontroluje, jak przeglądarka powinna traktować zawartość wykraczającą poza wymiary elementu. Przyjrzymy się również różnym wartościom tej właściwości oraz przykładom jej zastosowania.

Co to jest `overflow`?

Właściwość overflow w CSS określa, co się dzieje, gdy zawartość elementu jest większa niż jego wymiary (szerokość i wysokość). Dzięki overflow możemy decydować, czy zawartość ma być widoczna, ukryta, przewijana lub kontrolowana w inny sposób.

selektor { overflow: wartość; }

W przypadku przepełnienia wartość może zawierać jeden z parametrów:

visible – domyślne
hidden – zakrywanie nie mieszczącej się zawartości w zadeklarowanych ramach
scroll – przewijanie
auto – w razie konieczności pojawią się przewijanie

Visible

visible – Jest to wartość domyślna. Zawartość, która wykracza poza wymiary elementu, pozostaje widoczna. Element nie będzie miał przewijanych pasków, a przepełniona zawartość wyświetli się poza granicami elementu.

.box-visible {
  width: 150px;
  height: 65px;
  overflow: visible;
  background-color: lightblue;
}

Cały tekst jest widoczny, bez przycinania i konieczności przewijania.

Hidden

hidden – nic, co wykracza poza wymiary elementu, nie będzie widoczne. Element nie będzie miał przewijanych pasków.

.box-hidden {
  width: 150px;
  height: 65px;
  overflow: hidden;
  background-color: lightcoral;
}

Nadmiar tekstu w tym bloku zostanie przycięty.

Scroll

scroll – niezależnie od tego, czy zawartość elementu przepełnia się, czy nie, paski przewijania wyświetlają się zawsze. Użytkownik może przewijać, aby zobaczyć przepełnioną zawartość.

.box-scroll {
  width: 150px;
  height: 65px;
  overflow: scroll;
  background-color: lightgreen;
}

Pełny tekst będzie można zobaczyć po przesunięciu suwaka w dół.

Auto

auto – paski przewijania pojawiają się tylko wtedy, gdy zawartość elementu jest większa niż jego wymiary. Jeśli zawartość się mieści, paski przewijania nie wyświetlają się.

.box-auto {
  width: 150px;
  height: 65px;
  overflow: auto;
  background-color: lightgoldenrodyellow;
}

Pełny tekst będzie można zobaczyć po przesunięciu.

Praktyczne Wskazówki

Responsywność – używaj overflow: auto w celu zapewnienia, że zawartość będzie dostępna na różnych urządzeniach bez nadmiernego przewijania.
Unikanie zbędnych pasków przewijania – używaj overflow-x i overflow-y, aby unikać wyświetlania niepotrzebnych pasków przewijania.
Testowanie na różnych urządzeniach – zawsze testuj swoje strony na różnych urządzeniach i rozdzielczościach, aby upewnić się, że przepełnienie jest obsługiwane prawidłowo.