Właściwość overflow

Właściwość overflow wskazuje przeglądarce, jak postępować z zawartością (tekst, obrazy, inne bloki), która wystaje poza granice bloku (poza jego szerokość lub wysokość). Przeglądarka może ukryć wystającą część, dodać paski przewijania lub nic nie robić (pozostawić jak jest - wystającym poza granice).

Składnia

selektor {
	overflow: hidden | scroll | auto | visible;
}

Wartości

Wartość	Opis
`hidden`	Ukrywa zawartość, która wystaje poza granice bloku.
`scroll`	Dodaje paski przewijania, i to zawsze, nawet jeśli nic nie wystaje (w tym przypadku będą nieaktywne).
`auto`	Dodaje paski przewijania w razie potrzeby: jeśli zawartość nie mieści się - pojawią się, jeśli wszystko się mieści - ich nie będzie.
`visible`	Nie ukrywa zawartości, która wystaje poza granice bloku.

Wartość domyślna: visible.

Przykład . Wartość visible

W tym przykładzie bardzo długie słowo nie zmieści się w kontenerze i wystanie poza jego granice. Przycięcia nie nastąpi:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: visible;
	border: 1px solid red;
	width: 200px;
}

Przykład . Wartość visible

A teraz ograniczona jest nie tylko szerokość, ale i wysokość (tekst wystanie poza blok i po wysokości):

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	width: 200px;
	height: 40px;
	overflow: visible;
	border: 1px solid red;
	margin-bottom: 20px;
}

Przykład . Wartość hidden

Teraz wszystko, co wystaje poza granice kontenera po prostu zostanie przycięte (i po wysokości też). Zwróć uwagę na to, że przycięcie po wysokości następuje tylko wtedy, gdy jest ona jawnie zadana. W przeciwnym przypadku tekst rozszerza kontener po wysokości - i żadnego przycięcia nie będzie:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: hidden;
	width: 200px;
	height: 40px;
	border: 1px solid red;
}

Przykład . Wartość scroll

Przy wartości scroll paski przewijania będą zawsze, nawet jeśli nic nie wystaje (w tym przypadku będą nieaktywne). Teraz tekst nie wystaje ani po szerokości, ani po wysokości, ale paski przewijania i tak są (nieaktywne):

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: scroll;
	width: 400px;
	height: 100px;
	border: 1px solid red;
}

Przykład . Wartość auto

Przy wartości auto paski przewijania dodawane są tylko, jeśli zawartość wystaje poza kontener. Teraz ich nie ma, ponieważ wszystko się mieści:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: auto;
	width: 400px;
	height: 100px;
	border: 1px solid red;
}

Przykład . Wartość auto

A teraz ograniczmy szerokość - pojawi się poziomy pasek przewijania:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: auto;
	height: 100px;
	border: 1px solid red;
}

Zobacz też

właściwość word-break,
przenosząca litery długiego słowa do nowego wiersza
właściwość overflow-wrap,
przenosząca litery długiego słowa do nowego wiersza
właściwość overflow-x,
która przycina wystające poziomo części
właściwość overflow-y,
która przycina wystające pionowo części