Przepełnienie {overflow}
W jaki sposób dodać suwaki przewijania do dowolnego elementu? Co zrobić, aby zawartość elementu nigdy nie wychodziła poza jego obręb?
selektor { overflow: sposób }Jako "sposób" należy podać:
- visible - pokazanie całej zawartości bez względu na rozmiary (domyślnie)
- hidden - ukrycie nadmiaru
- scroll - suwaki do przewijania
- auto - pokazanie suwaków jeśli to konieczne
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.
Przykład {overflow}
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: 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
Pytania i odpowiedzi {overflow}
Co to jest "overflow" w CSS?
W CSS, overflow to właściwość, która kontroluje, co dzieje się, gdy zawartość elementu jest większa od jego zadeklarowanej szerokości i wysokości. Określa, czy i jak ma być wyświetlany nadmiar treści wewnątrz elementu.
Co oznacza "overflow: hidden"?
W CSS, "overflow: hidden" to zastosowanie właściwości overflow z ustawieniem hidden. Oznacza to, że wszelki nadmiar zawartości, który wychodzi poza granice elementu, będzie ukryty i nie będzie widoczny dla użytkownika. Nie wyświetli się pasek przewijania ani część treści poza określoną przestrzenią elementu.
Przeglądarki
 Chrome |  Firefox |  Edge |  Opera |  Safari | |
|---|---|---|---|---|---|
overflow: wartość | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 7 2003-01-28 | 1 2003-06-23 |
overflow: auto | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 15 2013-07-02 | 3 2007-10-26 |
overflow: hidden | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 15 2013-07-02 | 3 2007-10-26 |
overflow: scroll | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 15 2013-07-02 | 3 2007-10-26 |
overflow: visible | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 15 2013-07-02 | 3 2007-10-26 |