Przejdź do treści

Rozmiary

Przepełnienie

selektor { overflow: sposób }
Selektorem może być znacznik wyświetlany w bloku albo zastępowany [zobacz: Wstawianie stylów].

Jako "sposób" należy podać:
  • visible - pokazanie całej zawartości bez względu na rozmiary (domyślnie)
  • hidden - ukrycie nadmiaru (nie obsługuje Netscape 7 ani Opera 6)
  • scroll - suwaki do przewijania (nie obsługuje Opera 6)
  • auto - pokazanie suwaków jeśli to konieczne (nie obsługuje Opera 6)

Według CSS 2.1 polecenie można również zastosować do komórek tabeli.

Określa co zrobić, gdy zawartość elementu nie mieści się w rozmiarach podanych przez width oraz height. Możliwe jest ukrycie nadmiarowej zawartość, pokazanie wszystkiego poprzez powiększenie rozmarów elementu (bez względu na parametry width i height) albo utworzenie suwaków do przewijania przepełnionej treści.

W przeglądarce Mozilla Firefox podczas drukowania strony, w której treść została objęta blokiem z przypisanym stylem "overflow: hidden", może wystąpić błąd, polegający na wydrukowaniu tylko pierwszej strony, nawet jeśli wysokość takiego bloku nie została określona.

Rozwiązaniem problemu jest przypisanie w arkuszu stylów dla wydruku deklaracji "overflow: visible" wszystkim elementom, które w domyślnym arkuszu stylów posiadają inną wartość tej właściwości, np.:

#tresc { overflow: hidden }

@media print {
	#tresc { overflow: visible }
}

Przykład:

width: 5ex
Szerokość tego akapitu jest większa niż 5ex, ponieważ w takich rozmiarach nie mieści się jego zawartość.


overflow: visible; width: 5ex overflow: visible; width: 5ex; overflow: visible; width: 5ex


overflow: hidden; width: 10em; height: 4em; overflow: hidden; width: 10em; height: 4em; overflow: hidden; width: 10em; height: 4em


overflow: scroll; width: 10em; height: 4em; overflow: scroll; width: 10em; height: 4em; overflow: scroll; width: 10em; height: 4em


overflow: auto; width: 10em; height: 4em; overflow: auto; width: 10em; height: 4em; overflow: auto; width: 10em; height: 4em


overflow: auto; width: 20em; overflow: auto; width: 20em; overflow: auto; width: 20em

Komentarze

Zobacz więcej komentarzy