Overflow касиети

overflow касиети браузерге, блоктун чек араларынан (анын туурасы же бийиктигинен) чыгып кеткен мазмун (текст, сүрөттөр, башка блоктор) менен кантип иштөө керектигин айтат. Браузер чыгып кеткен бөлүгүн жашыра алат, жылган жолдорун кошо алат же эч нерсе кылбайт (калтырат өзүнчө - чек араларынан чыгып кеткендей).

Синтаксис

селектор {
	overflow: hidden | scroll | auto | visible;
}

Маанилери

Маани	Сүрөттөмө
`hidden`	Блоктун чек араларынан чыгып кеткен мазмунду жашырат.
`scroll`	Жылган жолдорун кошот, жана ар дайым, эч нерсе чыкпаса дагы (бул учурда алар активдүү эмес болот).
`auto`	Жылган жолдорун зарылчылык болгондо гана кошот: эгерде мазмун сыя албаса - алар пайда болот, эгерде бардыгы сыя алса - алар болбойт.
`visible`	Блоктун чек араларынан чыгып кеткен мазмунду жашырбайт.

Демейки мааниси: visible.

Мисал . visible мааниси

Бул мисалда өтө узун сөз контейнерге сыя албайт жана анын чек араларынан чыгып кетет. Кесилүү болбойт:

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

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

Мисал . visible мааниси

Азыр туурасы гана эмес, бийиктиги да чектелди (текст блоктон бийиктик боюнча дагы чыгып кетет):

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

Мисал . hidden мааниси

Азыр контейнердин чек араларынан чыгып кеткен бардык нерсе жөн гана кесилип алынат (бийиктик боюнча дагы). Көңүл буруңуз, бийиктик боюнча кесилүү гана анык белгиленген учурда болот. Башка учурда текст контейнерди бийиктик боюнча кеңейтет - жана эч кандай кесилүү болбойт:

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

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

Мисал . scroll мааниси

scroll маанисинде жылган жолдор ар дайым болот, эч нерсе чыкпаса дагы (бул учурда алар активдүү эмес болот). Азыр текст туурасы боюнча да, бийиктиги боюнча да чыкпайт, бирок жылган жолдор бардык учурда бар (активдүү эмес):

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

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

Мисал . auto мааниси

auto маанисинде жылган жолдор гана кошулат, эгерде мазмун чыгып кетсе. Азыр алар жок, анткени бардыгы сыя алынат:

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

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

Мисал . auto мааниси

Эми туурасын чектейли - горизонталдык жылган жол пайда болот:

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

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

Дагы караңыз

word-break касиети,
узун сөздүн тамгаларын жаңы сапка көчүрөт
overflow-wrap касиети,
узун сөздүн тамгаларын жаңы сапка көчүрөт
overflow-x касиети,
горизонталдык багытта чыгып кеткен бөлүктөрдү кесе турган
overflow-y касиети,
вертикалдык багытта чыгып кеткен бөлүктөрдү кесе турган