Jak korzystać z overflow w CSS3?

By /

CSS

Właściwość overflow w CSS3 pozwala zarządzać sposobem wyświetlania zawartości elementu, która nie mieści się w jego obszarze. Może to być szczególnie przydatne w przypadkach, gdy mamy do czynienia z ograniczoną przestrzenią i chcemy kontrolować sposób, w jaki zawartość jest prezentowana użytkownikowi – czy ma być przycięta, czy dostępna poprzez paski przewijania.

Podstawowe użycie overflow

Właściwość overflow może przyjmować kilka wartości, w tym visible (domyślna), hidden, scroll oraz auto. Oto krótki opis każdej z nich:

  • visible: Zawartość wychodząca poza obszar elementu będzie widoczna.
  • hidden: Zawartość wychodząca poza obszar elementu zostanie ukryta.
  • scroll: Dla elementu zostaną dodane paski przewijania, niezależnie od tego, czy są one potrzebne, aby zobaczyć całą zawartość.
  • auto: Paski przewijania pojawią się tylko wtedy, gdy zawartość przekracza wymiary elementu.

Przykład z overflow

W tym przykładzie stworzymy prosty kontener z tekstem, który wykorzystuje różne ustawienia overflow, aby zademonstrować ich efekty.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przykład Overflow w CSS3</title>
<style>
  .container {
    width: 200px;
    height: 100px;
    border: 2px solid #000;
    margin-bottom: 20px;
  }

  .overflow-visible {
    overflow: visible;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-scroll {
    overflow: scroll;
  }

  .overflow-auto {
    overflow: auto;
  }
</style>
</head>
<body>

<div class="container overflow-visible">
  <p>Ten tekst przekracza obszar widoczny i jest ustawiony na overflow: visible.</p>
</div>

<div class="container overflow-hidden">
  <p>Ten tekst przekracza obszar widoczny i jest ustawiony na overflow: hidden.</p>
</div>

<div class="container overflow-scroll">
  <p>Ten tekst przekracza obszar widoczny i jest ustawiony na overflow: scroll.</p>
</div>

<div class="container overflow-auto">
  <p>Ten tekst przekracza obszar widoczny i jest ustawiony na overflow: auto.</p>
</div>

</body>
</html>

Jak to działa?

  • W pierwszym kontenerze (overflow-visible), tekst wychodzący poza obszar będzie nadal widoczny na zewnątrz kontenera.
  • W drugim kontenerze (overflow-hidden), tekst wychodzący poza obszar kontenera zostanie ukryty.
  • W trzecim kontenerze (overflow-scroll), niezależnie od tego, czy cała zawartość się mieści, zawsze wyświetlane są paski przewijania.
  • W czwartym kontenerze (overflow-auto), paski przewijania pojawiają się tylko wtedy, gdy zawartość przekracza rozmiary kontenera.

Podsumowanie

Właściwość overflow w CSS3 jest potężnym narzędziem, które pozwala deweloperom na efektywne zarządzanie zawartością przekraczającą rozmiary elementów. Dzięki różnym dostępnym opcjom, można wybrać najbardziej odpowiedni sposób prezentacji zawartości, zapewniając jednocześnie dobre doświadczenie użytkownika. Użycie overflow ma kluczowe znaczenie w projektowaniu responsywnych i dobrze zorganizowanych stron internetowych.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video Fullstack w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Powiązane artykuły

Scroll to Top