Overflow xassəsi

overflow xassəsi brauzerə blokun sərhədlərindən (eni və ya hündürlüyü) kənara çıxan məzmunla (mətn, şəkillər, digər bloklar) necə məşğul olacağını göstərir. Brauzer kənara çıxan hissəni gizlədə, sürüşdürmə zolaqları əlavə edə və ya heç nə etməyə bilər (olduğu kimi saxlayar - sərhədlərdən kənara çıxmış halda).

Sintaksis

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

Qiymətlər

Qiymət	Təsvir
`hidden`	Blokun sərhədlərindən kənara çıxan məzmunu gizlədir.
`scroll`	Sürüşdürmə zolaqlarını əlavə edir, hətta heç nə çıxmasa belə (bu halda onlar aktiv olmayacaq).
`auto`	Lazım olduqda sürüşdürmə zolaqlarını əlavə edir: əgər məzmun sığmırsa - onlar görünəcək, əgər hər şey sığırsa - onlar olmayacaq.
`visible`	Blokun sərhədlərindən kənara çıxan məzmunu gizlətmir.

Standart qiymət: visible.

Nümunə . Visible qiyməti

Bu nümunədə çox uzun söz konteynerə sığmayacaq və onun sərhədlərindən kənara çıxacaq. Kəsmə baş vermir:

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

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

Nümunə . Visible qiyməti

İndi isə təkcə en deyil, hündürlük də məhduddur (mətn blokdan hündürlükdə də kənara çıxacaq):

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

Nümunə . Hidden qiyməti

İndi konteynerin sərhədlərindən kənara çıxan hər şey sadəcə kəsiləcək (hündürlükdə də). Diqqət edin ki, hündürlükdə kəsmə yalnız o zaman baş verir ki, o açıq şəkildə təyin olunsun. Əks halda mətn konteyneri hündürlükdə genişləndirir - və heç bir kəsmə baş verməyəcək:

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

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

Nümunə . Scroll qiyməti

scroll qiymətində sürüşdürmə zolaqları həmişə olacaq, hətta heç nə çıxmasa belə (bu halda onlar aktiv olmayacaq). İndi mətn nə enə, nə də hündürlüyə çıxmır, amma sürüşdürmə zolaqları yenə də var (aktiv deyil):

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

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

Nümunə . Auto qiyməti

auto qiymətində sürüşdürmə zolaqları yalnız məzmun konteynerdən kənara çıxdıqda əlavə olunur. İndi onlar yoxdur, çünki hər şey sığı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;
}

Nümunə . Auto qiyməti

İndi isə eni məhdudlaşdıraq - üfüqi sürüşdürmə zolağı peyda olacaq:

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

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

Həmçinin bax

word-break xassəsi,
uzun sözün hərflərini yeni sətirə köçürür
overflow-wrap xassəsi,
uzun sözün hərflərini yeni sətirə köçürür
overflow-x xassəsi,
üfüqi istiqamətdə kənara çıxan hissələri kəsir
overflow-y xassəsi,
şaquli istiqamətdə kənara çıxan hissələri kəsir