Overflow xususiyati

overflow xususiyati brauzerga blok chegarasidan (uning kengligi yoki balandligidan) chiqib ketgan kontentni (matn, rasmlar, boshqa bloklar) qanday boshqarish kerakligini ko'rsatadi. Brauzer chetga chiqib ketgan qismni yashirishi, aylantirish chiziqlarini qo'shishi yoki hech narsa qilmasligi mumkin (chetga chiqib ketgan holda qoldiradi).

Sintaksis

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

Qiymatlar

Qiymat	Ta'rif
`hidden`	Blok chegarasidan chiqib ketgan kontentni yashiradi.
`scroll`	Aylantirish chiziqlarini qo'shadi, hatto hech narsa chiqib ketmasa ham (bu holda ular faol bo'lmaydi).
`auto`	Zarurat bo'lganda aylantirish chiziqlarini qo'shadi: agar kontent sig'masa - ular paydo bo'ladi, agar hammasi sig'sa - ular bo'lmaydi.
`visible`	Blok chegarasidan chiqib ketgan kontentni yashirmaydi.

Standart qiymat: visible.

Misol . Visible qiymati

Ushbu misolda juda uzun so'z konteynerga sig'maydi va uning chegarasidan chiqib ketadi. Kesish amalga oshirilmaydi:

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

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

Misol . Visible qiymati

Endi nafaqat kenglik, balki balandlik ham cheklangan (matn blokdan balandlik bo'yicha ham chiqib ketadi):

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

Misol . Hidden qiymati

Endi konteyner chegarasidan chiqib ketgan hamma narsa oddiygina kesiladi (balandlik bo'yicha ham). E'tibor bering, balandlik bo'yicha kesish faqat u aniq belgilanganda amalga oshiriladi. Aks holda matn konteynerni balandlik bo'yicha kengaytiradi - va hech qanday kesish amalga oshirilmaydi:

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

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

Misol . Scroll qiymati

scroll qiymatida aylantirish chiziqlari har doim bo'ladi, hatto hech narsa chiqib ketmasa ham (bu holda ular faol bo'lmaydi). Hozir matn na kenglik, na balandlik bo'yicha chiqib ketmaydi, lekin aylantirish chiziqlari baribir mavjud (faol emas):

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

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

Misol . Auto qiymati

auto qiymatida aylantirish chiziqlari faqat kontent konteynerdan chiqib ketganda qo'shiladi. Hozir ular yo'q, chunki hammasi sig'adi:

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

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

Misol . Auto qiymati

Endi kenglikni cheklaymiz - gorizontal aylantirish chizig'i paydo bo'ladi:

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

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

Shuningdek qarang

word-break xususiyati,
uzun so'z harflarini yangi qatorga o'tkazadi
overflow-wrap xususiyati,
uzun so'z harflarini yangi qatorga o'tkazadi
overflow-x xususiyati,
gorizontal yo'nalishda chiqib ketgan qismlarni kesadi
overflow-y xususiyati,
vertikal yo'nalishda chiqib ketgan qismlarni kesadi