Свойство overflow

Свойство overflow браузерга блок чегарасидан (унинг эни ва бўйидан) чиқиб қолган контент (матн, расмлар, бошқа блоклар) билан нима қилишни кўрсатади. Браузер чиқиб қолган қисмини беркитиши, сергичмоч туғмалар қўшиши ёки ҳеч нарса қилмаслиги мумкин (чегаралардан чиқиб қолган ҳолида қолдириш).

Синтаксис

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

Қийматлар

Қиймат	Тавсиф
`hidden`	Блок чегарасидан чиқиб қолган контентни беркитади.
`scroll`	Ҳар доим сергичмоч тугмаларни қўшади, ҳатто ҳеч нарса чиқмаса ҳам (бу ҳолда улар фаол бўлмайди).
`auto`	Зарурат бўлганда сергичмоч тугмаларни қўшади: агар контент сиғмаса - улар пайдо бўлади, агар ҳаммаси сиғса - улар бўлмайди.
`visible`	Блок чегарасидан чиқиб қолган контентни беркитмайди.

Стандарт қиймат: visible.

Мисол . Visible қиймати

Бу мисолда juda uzun soʻz контейнерга сиғмайди ва унинг чегараларидан чиқиб кетади. Қисиш юз бермайди:

<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 свойстваси,
у gorizontal чиқиб қолган қисмларни кесади
overflow-y свойстваси,
у vertical чиқиб қолган қисмларни кесади