Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki
Grafika

Wypływanie zawartości

Email Drukuj PDF

Tematy: kadrowanie | kursory | sposób wyświetlania elementów | wypływanie zawartości | widzialność elementów

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>

zawartość tytułu stopnia 1

<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>

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


Interpretacja: Internet Explorer, Firefox, Opera, Chrome

 

HTML5. Rusz głową.

HTML5. Rusz głową!

HTML5. Ćwiczenia praktyczne.

HTML5. Ćwiczenia praktyczne.

HTML5. Nieoficjalny podręcznik.

HTML5. Nieoficjalny podręcznik

Nowości Helionu

Statystyki

Użytkowników : 3556
Artykułów : 513
Zakładki : 28
Odsłon : 19033617