Īpašība overflow

Īpašība overflow norāda pārlūkprogrammai, kā rīkoties ar saturu (teksts, attēli, citi bloki), kas izkļūst ārpus bloka robežām (ārpā tā platuma vai augstuma). Pārlūkprogramma var paslēpt izkritusšo daļu, pievienot ritjoslas vai neko nedarīt (atstāt kā ir - izkritusšu ārpus robežām).

Sintakse

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

Vērtības

Vērtība	Apraksts
`hidden`	Paslēpj to saturu, kas izkļuvis ārpus bloka robežām.
`scroll`	Pievieno ritjoslas, turklāt vienmēr, pat ja nekas neizkļūst (šajā gadījumā tās būs neaktīvas).
`auto`	Pievieno ritjoslas pēc vajadzības: ja saturs neietilpst - tās parādīsies, ja viss ietilpst - tās nebūs.
`visible`	Nepaslēpj to saturu, kas izkļuvis ārpus bloka robežām.

Noklusējuma vērtība: visible.

Piemērs . Vērtība visible

Šajā piemērā ļoti garš vārds neietilps konteinerā un izkļūs ārpus tā robežām. Apgriešana nenotiek:

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

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

Piemērs . Vērtība visible

Bet tagad ir ierobežots ne tikai platums, bet arī augstums (teksts izkļūs ārpus bloka arī pēc augstuma):

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

Piemērs . Vērtība hidden

Tagad viss, kas izkļuvis ārpus konteinera robežām, tiks vienkārši apgriezts (arī pēc augstuma). Pievērsiet uzmanību tam, ka apgriešana pēc augstuma notiek tikai tad, kad tas ir skaidri norādīts. Pretējā gadījumā teksts paplašina konteineru pēc augstuma - un nekādas apgriešanas nebūs:

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

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

Piemērs . Vērtība scroll

Ar vērtību scroll ritjoslas būs vienmēr, pat ja nekas neizkļūst (šajā gadījumā tās būs neaktīvas). Tagad teksts neizkļūst ne pēc platuma, ne pēc augstuma, bet ritjoslas joprojām ir (neaktīvas):

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

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

Piemērs . Vērtība auto

Ar vērtību auto ritjoslas tiek pievienotas tikai tad, ja saturs izkļūst ārpus konteinera. Tagad tādu nav, jo viss ietilpst:

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

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

Piemērs . Vērtība auto

Bet tagad ierobežosim platumu - parādīsies horizontālā ritjosla:

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

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

Skatiet arī

īpašība word-break,
kas pārnes garā vārda burtus jaunā rindā
īpašība overflow-wrap,
kas pārnes garā vārda burtus jaunā rindā
īpašība overflow-x,
kas apgriež horizontāli izkritusšās daļas
īpašība overflow-y,
kas apgriež vertikāli izkritusšās daļas