Overflow

W CSS3, właściwość overflow jest używana do określenia, co dzieje się z treścią, która przekracza wymiary elementu. Kontrola nadmiaru treści jest kluczowym elementem projektowania responsywnych i elastycznych interfejsów użytkownika. Właściwość ta oferuje różne sposoby obsługi zawartości, która nie mieści się w zadanym obszarze, od ukrywania jej przez przewijanie po automatyczne dostosowanie.

Przykłady użycia overflow

W tej części przedstawimy różne wartości właściwości overflow oraz pokażemy przykłady kodu ilustrujące ich działanie.

1. overflow: visible;

Domyślna wartość. Treść, która wykracza poza obszar, jest widoczna poza elementem.

<!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: visible;`</title>
    <style>
        .visible-example {
            width: 200px;
            height: 100px;
            overflow: visible;
            border: 2px solid #000;
        }
    </style>
</head>
<body>
    <h3>`overflow: visible;`</h3>
    <div class="visible-example">Ten tekst wykracza poza obszar swojego kontenera, ale jest nadal widoczny.</div>
</body>
</html>
2. overflow: hidden;

Treść, która wykracza poza obszar, jest ukryta.

<style>
    .hidden-example {
        width: 200px;
        height: 100px;
        overflow: hidden;
        border: 2px solid #000;
    }
</style>
<div class="hidden-example">Ten tekst wykracza poza obszar swojego kontenera, ale jest ukryty.</div>
3. overflow: scroll;

Dodaje paski przewijania, niezależnie od tego, czy treść wykracza poza obszar, czy nie.

<style>
    .scroll-example {
        width: 200px;
        height: 100px;
        overflow: scroll;
        border: 2px solid #000;
    }
</style>
<div class="scroll-example">Ten tekst może lub nie wykraczać poza obszar swojego kontenera, ale paski przewijania są zawsze widoczne.</div>
4. overflow: auto;

Paski przewijania są dodawane tylko wtedy, gdy treść przekracza obszar elementu.

<style>
    .auto-example {
        width: 200px;
        height: 100px;
        overflow: auto;
        border: 2px solid #000;
    }
</style>
<div class="auto-example">Ten tekst wykracza poza obszar swojego kontenera, więc paski przewijania są dodawane automatycznie.</div>

Podsumowanie

Właściwość overflow w CSS3 jest niezbędnym narzędziem do zarządzania treścią, która nie mieści się w wyznaczonym obszarze elementu. Dzięki różnym wartościom, takim jak visible, hidden, scroll, i auto, deweloperzy mają elastyczność w decydowaniu, jak najlepiej obsłużyć nadmiarową treść. Używanie tej właściwości pozwala na tworzenie czystych i użytkowych interfejsów, niezależnie od wielkości i ilości wyświetlanej treści.

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

Poprzedni
Następny
Scroll to Top