Tematy: kadrowanie | kursory | sposób wyświetlania | wypływanie | widzialność
| Dane w pigułce | |
| Zastosowanie | obsługa przepełnienia pojemnika elementu |
| Dziedziczenie | nie |
| Wartości | visible, hidden, scroll, auto |
| Wartość domyślna | visible |
| Przykład | overflow:scroll |
| Uwagi | |
| Odpowiednik w HTML | brak |
Aby określić sposób potraktowania zawartości wypływającej z pojemnika, należy wpisać w definicji stylu overflow: wartość.
Gdy zdefiniowany przez nas pojemnik, czyli obszar jakiegoś elementu jest zbyt mały, aby zawrzeć w sobie całą zawartość elementu, wypływa ona z niego - następuje przepełnienie. Fakt ten możemy obsłużyć za pomocą polecenia overflow.
Jeśli określiliśmy pojemnik, 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 zwiększa 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" zawartości. W poleceniu overflow możemy przyjąć jedną z czterech wartości: scroll, visible, auto i hidden.
Wartość 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
Wartość visible powoduje wyświetlenie całej zawartości elementu, bez względu na zdefiniowany obszar występowania. W Internet Explorerze 6 wylana zawartość nie nakłada się na inne elementy, w IE 7, Firefoksie i Operze - nakłada się.
<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
Wartość 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
Wartość hidden spowoduje 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>
Interpretacja: Internet Explorer, Firefox, Opera