Kurs HTML

Wprowadzenie: Niezależna kontrola przepełnienia

W poprzedniej lekcji poznaliśmy właściwość overflow, która kontroluje zachowanie treści wykraczającej poza granice elementu w obu kierunkach (poziomym i pionowym) jednocześnie.

CSS oferuje również dwie bardziej szczegółowe właściwości: overflow-x i overflow-y. Pozwalają one na **niezależne zdefiniowanie**, co ma się dziać z treścią przepełniającą element odpowiednio w **osi poziomej (X)** i **osi pionowej (Y)**.

Daje to większą elastyczność w zarządzaniu układem i przewijaniem, pozwalając np. włączyć tylko pionowy pasek przewijania lub ukryć przepełnienie tylko w poziomie.

Właściwości overflow-x i overflow-y

Obie te właściwości przyjmują te same wartości, co ogólna właściwość overflow:

• visible: (Domyślne) Treść przepełniająca w danej osi jest renderowana poza granicami elementu.
• hidden: Treść przepełniająca w danej osi jest przycinana (ukrywana).
• scroll: Pasek przewijania dla danej osi jest dodawany zawsze (nawet jeśli nie jest potrzebny), a treść jest przycinana.
• auto: Pasek przewijania dla danej osi jest dodawany tylko wtedy, gdy treść faktycznie przepełnia element w tym kierunku.
• clip: Podobne do hidden, ale z potencjalnie lepszą wydajnością, bo nie tworzy nowego kontekstu formatowania i zabrania programowego przewijania.
• overlay: Przestarzała wartość, działała jak auto, ale paski przewijania rysowane były "nad" treścią, nie zajmując miejsca. Nie należy jej używać.

Ważna zależność: Jeśli ustawisz overflow-x lub overflow-y na wartość inną niż visible (np. hidden, scroll, auto), a druga oś ma wartość visible (domyślnie), to wartość visible dla tej drugiej osi zostanie potraktowana tak, jakby była ustawiona na auto. Innymi słowy, nie można mieć jednej osi z przewijaniem lub ukrywaniem, a drugiej z treścią "wylewającą się" poza element - przeglądarka automatycznie ograniczy obie osie.

<div class="box overflow-xy-example">
  Ten tekst jest dość długi i może wymagać pionowego przewijania. Unikamy jednak długich słów, aby nie wymusić poziomego przepełnienia, które chcemy ukryć.
</div>Kopiuj

.box {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  margin-bottom: 10px;
  padding: 5px;
}

.overflow-xy-example {
  overflow-y: auto;   /* Włącz pionowe przewijanie, jeśli potrzebne */
  overflow-x: hidden; /* Zawsze ukrywaj poziome przepełnienie */
  background-color: lightcyan;
  white-space: normal; /* Upewnij się, że tekst się zawija */
}
/* Efekt: Jeśli tekst jest za długi pionowo, pojawi się pionowy pasek. */
/* Poziomy pasek nigdy się nie pojawi, nawet jeśli słowo byłoby za długie. */Kopiuj

Przykłady użycia

Tylko pionowe przewijanie (częsty przypadek)

Chcemy, aby długi tekst w kontenerze był przewijalny tylko w pionie, a ewentualne zbyt długie słowa były po prostu ucinane lub zawijane.

.vertical-scroll-only {
  width: 300px;
  max-height: 200px; /* Ogranicz wysokość */
  overflow-y: auto;   /* Włącz pionowe auto-przewijanie */
  overflow-x: hidden; /* Ukryj poziome przepełnienie */
  border: 1px solid blue;
}Kopiuj

Tylko poziome przewijanie (np. dla tabeli, kodu)

Chcemy, aby szeroka tabela lub blok kodu był przewijalny tylko w poziomie, bez pionowego paska.

.horizontal-scroll-only {
  max-width: 400px; /* Ogranicz szerokość kontenera */
  overflow-x: auto;   /* Włącz poziome auto-przewijanie */
  overflow-y: hidden; /* Ukryj pionowe przepełnienie */
  border: 1px solid green;
  white-space: nowrap; /* Zapobiegaj zawijaniu się treści (np. w bloku kodu) */
}Kopiuj

<div class="horizontal-scroll-only">
  <pre><code>To jest bardzo długa linia kodu, która normalnie spowodowałaby poziome przepełnienie całego layoutu, ale dzięki overflow-x: auto zostanie zamknięta w przewijalnym kontenerze.</code></pre>
</div>Kopiuj

Ukrywanie przepełnienia w obu kierunkach

To samo co overflow: hidden;.

.hide-both {
  overflow-x: hidden;
  overflow-y: hidden;
  /* Równoważne: overflow: hidden; */
}Kopiuj