Overflow häsiýeti

overflow häsiýeti brauzere, blokyň çäklerinden (eni ýa-da beýikliginden) daşyndan çykýan mazmun (tekst, suratlar, beýleki bloklar) bilen näme etmelidigini görkezýär. Brauzer daşyndan çykýan bölegi gizlap bilýär, süýşürmä zolaklaryny goşup bilýär ýa-da hiç zat etmän galdyrap bilýär (ýagdaýynda galdyrýar - çäklerden daşyndan çykýan).

Sintaksis

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

Bahalar

Baha	Düşündiriş
`hidden`	Blokyň çäklerinden daşyndan çykýan mazmuny gizlaýar.
`scroll`	Süýşürmä zolaklaryny goşýar, hemme wagty, hatda hiç zat daşyndan çykmasa-da (bu ýagdaýda olar hereketsiz bolar).
`auto`	Gerek bolsa süýşürmä zolaklaryny goşýar: eger mazmun ýerleşmese - olar peýda bolar, eger hemmesi ýerleşse - olar bolmaz.
`visible`	Blokyň çäklerinden daşyndan çykýan mazmuny gizlamaz.

Bölüp bermegiň bahasy: visible.

Mysal . Visible bahasy

Bu mysalda gaty uzyn söz konteýnera ýerleşmez we onuň çäklerinden daşyndan çykar. Kesip aýyrmak bolmaýar:

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

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

Mysal . Visible bahasy

Indi diňe eni çäklendirilmedik, eýsem beýikligi hem çäklendirildi (tekst blokdan daşyndan çykar we beýiklikde):

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

Mysal . Hidden bahasy

Indi konteýneriň çäklerinden daşyndan çykan ähli zat ýöne kesilip aýyrylar (beýiklikde hem). Üns beriň beýiklikde kesip aýyrmak diňe açyk görkezilen ýagdaýda bolýar. Ýok bolsa tekst konteýneri beýiklikde giňeldýär - we hiç hili kesip aýyrmak bolmaz:

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

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

Mysal . Scroll bahasy

scroll bahasy bilen süýşürmä zolaklary hemme wagty bolar, hatda hiç zat daşyndan çykmasa-da (bu ýagdaýda olar hereketsiz bolar). Indi tekst na ende, na beýiklikde daşyndan çykmaýar, ýöne süýşürmä zolaklary bar (hereketsiz):

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

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

Mysal . Auto bahasy

auto bahasy bilen süýşürmä zolaklary diňe gerek bolsa goşulýar, eger mazmun konteýnerden daşyndan çyksa. Indi olar ýok, sebäbi hemmesi ýerleşýär:

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

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

Mysal . Auto bahasy

Indi bolsa eni çäklendireris - göni süýşürmä zolagy peýda bolar:

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

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

Şeýle-de görüň

word-break häsiýeti,
uzyn sözüň harplaryny täze setire geçirýän
overflow-wrap häsiýeti,
uzyn sözüň harplaryny täze setire geçirýän
overflow-x häsiýeti,
göni daşyndan çykýan bölekleri kesip aýyryýan
overflow-y häsiýeti,
dik daşyndan çykýan bölekleri kesip aýyryýan