Kurs HTML

Wprowadzenie: Co zrobić z nadmiarem treści?

Właściwość overflow w CSS określa, co ma się stać z treścią, która **nie mieści się** w ustalonych wymiarach (width i/lub height) elementu blokowego. Domyślnie treść po prostu "wylewa się" poza granice elementu, ale overflow pozwala to zachowanie kontrolować.

Jest to kluczowa właściwość do zarządzania długimi tekstami, dużymi obrazkami w małych kontenerach, tworzenia przewijalnych obszarów na stronie oraz jako mechanizm clearfix (jak wspomniano w poprzedniej lekcji).

W tej lekcji poznamy cztery podstawowe wartości właściwości overflow.

overflow: visible; (Domyślne)

Jest to **wartość domyślna** dla większości elementów blokowych. Treść, która nie mieści się w elemencie, jest renderowana **na zewnątrz** jego granic (pudełka).

• Treść "wylewa się" poza element.
• Może nachodzić na inne elementy znajdujące się poniżej lub obok.
• Nie pojawiają się paski przewijania.

<div class="box visible-example">
  Bardzo długi tekst, który na pewno nie zmieści się w ustalonych wymiarach tego małego pudełka i wyleje się poza jego granice.
</div>
<p>Tekst poniżej pudełka.</p>Kopiuj

.box {
  width: 150px;
  height: 50px;
  border: 1px solid black;
  margin-bottom: 10px;
}

.visible-example {
  overflow: visible; /* Domyślne */
  background-color: lightyellow;
}
/* Efekt: Tekst wyleje się poza żółte pudełko i może nachodzić na paragraf poniżej. */Kopiuj

overflow: hidden;

Treść, która nie mieści się w elemencie, jest **przycinana (obcinana)** do jego granic i staje się niewidoczna. Nie pojawiają się paski przewijania.

• Nadmiarowa treść jest ukrywana.
• Element zachowuje swoje ustalone wymiary.
• Brak możliwości dostępu do ukrytej treści przez użytkownika (bez dodatkowego kodu JavaScript).
• Tworzy nowy kontekst formatowania blokowego (BFC), co m.in. zapobiega zapadaniu się rodzica przy floatach.

<div class="box hidden-example">
  Bardzo długi tekst, który na pewno nie zmieści się w ustalonych wymiarach tego małego pudełka i zostanie brutalnie obcięty na jego krawędziach.
</div>
<p>Tekst poniżej pudełka.</p>Kopiuj

.hidden-example {
  overflow: hidden;
  background-color: lightcoral;
}
/* Efekt: Tekst zostanie obcięty na granicach czerwonego pudełka. */
/* Paragraf poniżej pojawi się normalnie pod pudełkiem. */Kopiuj

overflow: scroll;

Treść, która nie mieści się w elemencie, jest przycinana, ale przeglądarka **zawsze dodaje paski przewijania** (zarówno poziomy, jak i pionowy), umożliwiając użytkownikowi dostęp do całej zawartości.

• Nadmiarowa treść jest ukrywana, ale dostępna przez przewijanie.
• Paski przewijania są widoczne **zawsze**, nawet jeśli treść idealnie mieści się w elemencie (wtedy paski są nieaktywne, "wyszarzone").
• Paski przewijania zajmują pewną przestrzeń wewnątrz elementu, potencjalnie zmniejszając dostępną przestrzeń dla treści.
• Tworzy nowy BFC.

<div class="box scroll-example">
  Bardzo długi tekst, który na pewno nie zmieści się w ustalonych wymiarach tego małego pudełka. Dzięki overflow: scroll pojawią się paski przewijania, które umożliwią odczytanie całości.
</div>
<p>Tekst poniżej pudełka.</p>Kopiuj

.scroll-example {
  overflow: scroll;
  background-color: lightblue;
}
/* Efekt: Pojawią się paski przewijania (pionowy na pewno, poziomy jeśli */
/* słowa są za długie i nie ma łamania linii). */Kopiuj

overflow: auto;

Jest to wartość najbardziej elastyczna i często preferowana. Przeglądarka dodaje paski przewijania **tylko wtedy, gdy są one potrzebne** – czyli tylko wtedy, gdy treść faktycznie nie mieści się w dostępnej przestrzeni.

• Nadmiarowa treść jest ukrywana, ale dostępna przez przewijanie (jeśli występuje).
• Paski przewijania pojawiają się **automatycznie** tylko dla tej osi (poziomej lub pionowej), w której treść się nie mieści.
• Jeśli treść mieści się idealnie, paski przewijania nie są wyświetlane.
• Tworzy nowy BFC.

<div class="box auto-example">
  Krótki tekst.
</div>
<div class="box auto-example" style="height: 80px;">
  Bardzo, bardzo, bardzo, bardzo, bardzo, bardzo, bardzo, bardzo, bardzo, bardzo, bardzo, bardzo, bardzo, bardzo, bardzo, bardzo długi tekst, który spowoduje pojawienie się pionowego paska przewijania.
</div>
<p>Tekst poniżej pudełek.</p>Kopiuj

.auto-example {
  overflow: auto;
  background-color: lightgreen;
}
/* Efekt: Pierwsze pudełko nie będzie miało pasków. */
/* Drugie pudełko będzie miało pionowy pasek przewijania. */Kopiuj