Vetia overflow

Vetia overflow i tregon shfletuesit, si të veprojë me përmbajtjen (tekst, imazhe, blloqe të tjera), që del jashtë kufijve të bllokut (jashtë gjerësisë ose lartësisë së tij). Shfletuesi mund të fshehë pjesën që del jashtë, të shtojë shirita rrëshqitës ose të mos bëjë asgjë (ta lë ashtu siç është - duke dalë jashtë kufijve).

Sintaksa

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

Vlerat

Vlera	Përshkrimi
`hidden`	Fsheh atë përmbajtje që del jashtë kufijve të bllokut.
`scroll`	Shton shirita rrëshqitës, dhe kjo gjithmonë, edhe nëse asgjë nuk del jashtë (në këtë rast ata do të jenë joaktiv).
`auto`	Shton shirita rrëshqitës kur është e nevojshme: nëse përmbajtja nuk ngëlet - ata do të shfaqen, nëse të gjitha ngëlen - nuk do të jenë.
`visible`	Nuk fsheh atë përmbajtje që del jashtë kufijve të bllokut.

Vlera e paracaktuar: visible.

Shembull . Vlera visible

Në këtë shembull, një fjalë shumë e gjatë nuk do të ngëlet në enë dhe do të dalë jashtë kufijve të saj. Prerja nuk ndodh:

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

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

Shembull . Vlera visible

Dhe tani është e kufizuar jo vetëm gjerësia, por edhe lartësia (teksti do të dalë jashtë bllokut edhe në lartësi):

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

Shembull . Vlera hidden

Tani, gjithçka që del jashtë kufijve të enës thjesht do të pritet (edhe në lartësi). Kushtojini vëmendje faktit që prerja në lartësi ndodh vetëm kur ajo është caktuar në mënyrë të qartë. Në rast të kundërt teksti i zgjeron enën në lartësi - dhe asnjë prerje nuk do të ketë:

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

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

Shembull . Vlera scroll

Me vlerën scroll shiritat e rrëshqitjes do të jenë gjithmonë, edhe nëse asgjë nuk del jashtë (në këtë rast ata do të jenë joaktiv). Tani teksti nuk del jashtë as në gjerësi, as në lartësi, por shiritat e rrëshqitjes janë gjithsesi (joaktiv):

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

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

Shembull . Vlera auto

Me vlerën auto shiritat e rrëshqitjes shtohen vetëm nëse përmbajtja del jashtë enës. Tani nuk ka, pasi e gjitha ngëlet:

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

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

Shembull . Vlera auto

Dhe tani le të kufizojmë gjerësinë - do të shfaqet shiriti horizontal i rrëshqitjes:

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

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

Shihni gjithashtu

vetia word-break,
që transferon shkronjat e një fjale të gjatë në një rresht të ri
vetia overflow-wrap,
që transferon shkronjat e një fjale të gjatë në një rresht të ri
vetia overflow-x,
që pret pjesët që dalin horizontalisht
vetia overflow-y,
që pret pjesët që dalin vertikalisht