Dokumentacja CSS z przykładami: Overflow

Q: Czym różni się overflow auto od scroll?

scroll zawsze rezerwuje paski przewijania, nawet gdy treść się mieści. auto pokazuje pasek przewijania tylko wtedy, gdy treść jest większa niż pudełko, i zwykle właśnie o to chodzi.

Q: Jak zrobić przewijany div?

Ogranicz jego rozmiar i pozwól na przewijanie: max-height: 300px; overflow-y: auto;. Bez ograniczenia height lub max-height div rośnie razem z treścią i nigdy się nie przepełnia.

Q: Dlaczego overflow-x: hidden dodaje też pionowy pasek przewijania?

Jeśli jedna oś ma hidden, scroll lub auto, wartość visible na drugiej osi jest obliczana jako auto. Zamiast tego użyj overflow-x: clip, które nie tworzy kontenera przewijania i zostawia drugą oś widoczną.

Q: Jak dodać wielokropek (...) do przepełnionego tekstu?

Dla jednej linii: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; na elemencie o ograniczonej szerokości. Dla kilku linii użyj display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;.

Co robi overflow

Gdy treść jest większa niż jej pudełko (stała wysokość, długie słowo, szeroka tabela), przepełnia je. Właściwość overflow decyduje, co dzieje się z nadmiarem:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Overflow values</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
    .box {
      width: 150px; height: 50px; padding: 8px;
      border: 2px solid #2563eb; background: #eff6ff;
      margin-bottom: 60px;
    }
    .visible { overflow: visible; }
    .hidden { overflow: hidden; }
    .scroll { overflow: scroll; }
    .auto { overflow: auto; }
  </style>
</head>
<body>
  <div class="row">
    <div class="box visible"><b>visible</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
    <div class="box hidden"><b>hidden</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
    <div class="box scroll"><b>scroll</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
    <div class="box auto"><b>auto</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
  </div>
</body>
</html>

Wartość	Co widzisz	Kontener przewijania
`visible` (domyślna)	Treść wylewa się z pudełka i zachodzi na to, co jest dalej	Nie
`hidden`	Przycięta przy krawędzi paddingu, bez pasków przewijania (skrypt nadal może ją przewinąć)	Tak
`clip`	Przycięta i bez żadnego przewijania, nawet skryptem	Nie
`scroll`	Zawsze pokazuje paski przewijania, nawet gdy treść się mieści	Tak
`auto`	Paski przewijania tylko wtedy, gdy treść się nie mieści	Tak

Na macOS i telefonach paski przewijania nakładają się na treść i znikają, więc scroll i auto mogą wyglądać tak samo, dopóki nie zaczniesz przewijać.

Tworzenie przewijanego pudełka

Pudełko przepełnia się tylko wtedy, gdy coś ogranicza jego rozmiar. height albo max-height razem z overflow-y: auto zamienia długą listę w przewijany panel:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Scrollable list</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .panel {
      max-height: 160px;
      overflow-y: auto;
      border: 1px solid #d1d5db; border-radius: 8px;
    }
    .panel p { margin: 0; padding: 10px 12px; border-bottom: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <div class="panel" id="panel">
    <p>Message 1</p><p>Message 2</p><p>Message 3</p><p>Message 4</p>
    <p>Message 5</p><p>Message 6</p><p>Message 7</p><p>Message 8</p>
  </div>
</body>
</html>

max-height jest tu lepsze niż height: krótka lista pozostaje krótka, a przewija się tylko długa. Przewijany obszar bez elementów, na których można ustawić fokus, powinien dostać tabindex="0", żeby osoby korzystające z klawiatury też mogły go przewijać.

overflow-x i overflow-y

Obie osie można ustawić osobno. Typowe zastosowanie to szeroka tabela, która przewija się na boki wewnątrz swojego kontenera, zamiast poszerzać całą stronę:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Horizontal scroll</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .table-wrap { overflow-x: auto; border: 1px solid #d1d5db; max-width: 360px; }
    table { border-collapse: collapse; }
    th, td { padding: 8px 12px; white-space: nowrap; border-bottom: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <div class="table-wrap" id="wrap">
    <table>
      <tr><th>Plan</th><th>Monthly</th><th>Yearly</th><th>Users</th><th>Storage</th><th>Support</th></tr>
      <tr><td>Free</td><td>$0</td><td>$0</td><td>1</td><td>1 GB</td><td>Community</td></tr>
      <tr><td>Team</td><td>$12</td><td>$120</td><td>10</td><td>100 GB</td><td>Email</td></tr>
    </table>
  </div>
</body>
</html>

Jedna zasada do zapamiętania: jeśli jedna oś ma hidden, scroll lub auto, wartość visible na drugiej osi staje się auto. Dlatego samo overflow-x: hidden może dać nieoczekiwany pionowy pasek przewijania. overflow-x: clip nie ma tego efektu:

.a { overflow-x: hidden; }  /* overflow-y computes to auto */
.b { overflow-x: clip; }    /* overflow-y stays visible */

Przycinanie tekstu wielokropkiem

text-overflow: ellipsis zastępuje przycięty koniec linii znakiem "…". Potrzebuje trzech rzeczy naraz: ograniczonej szerokości, tekstu, który nie może się zawijać, i ukrytego przepełnienia:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ellipsis</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .one-line {
      width: 240px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border: 1px solid #d1d5db; padding: 6px;
    }
    .three-lines {
      width: 240px; margin-top: 12px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      border: 1px solid #d1d5db; padding: 6px;
    }
  </style>
</head>
<body>
  <div class="one-line" id="one">A very long file name that will not fit in the box.pdf</div>
  <div class="three-lines" id="three">This paragraph is longer than three lines. Only the first three lines are shown and the end of the third one becomes an ellipsis, which suits card previews and search results.</div>
</body>
</html>

Ograniczanie linii z prefiksem -webkit- działa w Chrome, Firefoksie i Safari. Czytniki ekranu nadal odczytują pełny tekst, więc przycięte słowa nie giną dla nich.

Skutki uboczne overflow

Ustawienie overflow na cokolwiek innego niż visible lub clip zmienia więcej niż samo przycinanie:

Obejmuje elementy float i marginesy dzieci. Element tworzy nowy kontekst formatowania bloków, więc rośnie, żeby objąć dzieci z float. display: flow-root robi to samo, niczego nie przycinając.
Psuje position: sticky poniżej. Dziecko ze sticky przykleja się do najbliższego kontenera przewijania; jeśli ten kontener się nie przewija, nic się nie przykleja.
Przycina dzieci pozycjonowane absolutnie (gdy przepełniony element jest też ich blokiem zawierającym), w tym rozwijane menu i podpowiedzi, a także cienie dzieci.

Ukrywanie paska przewijania

Możesz zachować przewijanie pudełka, ukrywając jego pasek przez scrollbar-width: none. Rób to oszczędnie: bez paska przewijania wielu czytelników nie zauważy, że jest więcej treści. scrollbar-gutter: stable działa odwrotnie: rezerwuje miejsce na pasek przewijania, żeby treść nie przesuwała się, gdy pasek się pojawi.

Częste błędy

Oczekiwanie przepełnienia bez limitu rozmiaru. Pudełko bez height lub max-height rośnie zamiast się przepełniać.
overflow: hidden na body, żeby "naprawić" poziome przewijanie. Zamiast tego znajdź element, który jest za szeroki (często stałe width, długi adres URL albo 100vw przy widocznym pasku przewijania).
Wielokropek bez white-space: nowrap. Tekst się zawija, więc nic nie przepełnia się w poziomie i wielokropek się nie pojawia.
overflow-x: hidden tworzące pionowy pasek przewijania. Użyj clip.
Rozwijane menu przycięte przez kartę. Przycina je overflow: hidden karty; przenieś regułę overflow albo wyrenderuj menu poza kartą.

Najczęściej zadawane pytania

Co robi overflow: hidden?

Przycina treść, która nie mieści się w polu paddingu elementu, bez pasków przewijania. Do ukrytej części nadal można przewinąć skryptem albo przez ustawienie fokusu na czymś w jej wnętrzu.

Czym różni się overflow auto od scroll?

scroll zawsze rezerwuje paski przewijania, nawet gdy treść się mieści. auto pokazuje pasek przewijania tylko wtedy, gdy treść jest większa niż pudełko, i zwykle właśnie o to chodzi.

Jak zrobić przewijany div?

Ogranicz jego rozmiar i pozwól na przewijanie: max-height: 300px; overflow-y: auto;. Bez ograniczenia height lub max-height div rośnie razem z treścią i nigdy się nie przepełnia.

Dlaczego overflow-x: hidden dodaje też pionowy pasek przewijania?

Jeśli jedna oś ma hidden, scroll lub auto, wartość visible na drugiej osi jest obliczana jako auto. Zamiast tego użyj overflow-x: clip, które nie tworzy kontenera przewijania i zostawia drugą oś widoczną.

Jak dodać wielokropek (...) do przepełnionego tekstu?

Dla jednej linii: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; na elemencie o ograniczonej szerokości. Dla kilku linii użyj display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;.

Powiązane zagadnienia