Gdy "pudełko", czyli naturalny obszar jakiegoś elementu jest zbyt małe, aby zawrzeć w sobie całą zawartość elementu, wypływa ona z niego. Fakt ten możemy obsłużyć za pomocą polecenia overflow
.
Jeśli określiliśmy pudełko, ale nie zdefiniowaliśmy wartości overflow
, treść wypływa ze zdefiniowanego obszaru i rozszerza faktyczny obszar jej występowania - zdefiniowana szerokość jest zachowywana, natomiast poszerza się wysokość. Jest to naturalne zachowanie elementu, np. treści akapitu czy tytułu.
<h1 style="width:250px; height:100px">zawartość tytułu stopnia 1</h1>
<P style="width:250px; height:100px">zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu...</P>
zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu
Możemy jednak określić, jak ma się zachować przeglądarka, gdy nastąpi owo "przelanie" tekstu. W poleceniu overflow
możemy przyjąć jedną z czterech wartości: scroll, visible, auto i hidden
.
Scroll
powoduje wyświetlenie pionowego i poziomego paska przewijania obejmujących zdefiniowany obszar występowania.
<P style="width:250px; height:100px; overflow:scroll">zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu...</P>
zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu
Visible
powoduje wyświetlenie całej zawartości elementu, bez względu na zdefiniowany obszar występowania. W Internet Explorerze wylana zawartość nie nakłada się na inne elementy, w Netscape 6 - nakłada się. Wydaje się, że poprawna (i logiczna) jest interpretacja Netscape'a.
<P style="width:250px; height:100px; overflow:visible">zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu...</P>
zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu
Auto
powoduje wyświetlenie jedynie tego paska przewijania, który jest w danej sytuacji potrzebny. W przypadku akapitu będzie to jedynie pasek pionowy.
<P style="width:250px; height:100px; overflow:auto">zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu...</P>
zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu
Hidden
powoduje przycięcie widocznej zawartości akapitu do obszaru zdefiniowanego pudełka. Wylana część akapitu nie będzie widoczna.
<P style="width:250px; height:100px; overflow:hidden">zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu...</P>
zawartość akapitu zawartość akapitu zawartość akapitu
zawartość akapitu zawartość akapitu zawartość akapitu
zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu