Overflow

CSS Layout - Overflow

CSS overflow xususiyati kontentning berilgan maydonga sig'maganda nima bo'lishini nazorat qiladi.

Bu matn juda uzun va uning konteynerining balandligi faqat 100 piksel. Shuning uchun o'quvchiga kontentni aylantirishga yordam berish uchun skroll paneli qo'shiladi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.

CSS Overflow

overflow xususiyati, agar elementning kontenti belgilangan maydonga sig'masa, kontentni kesish yoki skroll panelini qo'shish kerakligini belgilaydi.

overflow xususiyati quyidagi qiymatlarga ega:

visible - Standart. Overflow kesilmaydi. Kontent elementning qutisidan tashqarida ko'rsatiladi.
hidden - Overflow kesiladi va qolgan kontent ko'rinmaydi.
scroll - Overflow kesiladi va qolgan kontentni ko'rish uchun skroll paneli qo'shiladi.
auto - Skrollga o'xshash, lekin skroll paneli faqat kerak bo'lganda qo'shiladi.

Eslatma

overflow xususiyati faqat belgilangan balandlikka ega blok elementlar uchun ishlaydi.

Eslatma

OS X Lion (Mac-da) skroll panellari standart bo'yicha yashirin va faqat foydalanilganda ko'rsatiladi (hatto "overflow:scroll" o'rnatilgan bo'lsa ham).

overflow: visible

Standart holda, overflow ko'rinadi, ya'ni kesilmaydi va elementning qutisidan tashqarida ko'rsatiladi:

Siz overflow xususiyatidan foydalanishingiz mumkin, agar yaxshiroq tartibni nazorat qilmoqchi bo'lsangiz. overflow xususiyati, agar kontent elementning qutisidan oshib ketsa, nima bo'lishini belgilaydi.

Misol

div {
  width: 200px;
  height: 65px;
  background-color: coral;
  overflow: visible;
}

overflow: hidden

hidden qiymati bilan overflow kesiladi va qolgan kontent yashirinadi:

Misol

div {
  overflow: hidden;
}

overflow: scroll

scroll qiymatini o'rnatganda, overflow kesiladi va qutining ichida aylantirish uchun skroll paneli qo'shiladi. E'tibor bering, bu har qanday holatda gorizontal va vertikal skroll panelini qo'shadi (hatto sizga kerak bo'lmasa ham):

Misol

div {
  overflow: scroll;
}

overflow: auto

auto qiymati skrollga o'xshash, lekin skroll panelini faqat kerak bo'lganda qo'shadi:

Misol

div {
  overflow: auto;
}

overflow-x va overflow-y

overflow-x va overflow-y xususiyatlari kontentning ortiqcha qismi faqat gorizontal yoki vertikal (yoki ikkala tomonda) qanday o'zgarishini belgilaydi:

overflow-x kontentning chap/o'ng chetlarini qanday qilish kerakligini belgilaydi.
overflow-y kontentning yuqori/pastki chetlarini qanday qilish kerakligini belgilaydi.

Misol

div {
  overflow-x: hidden; /* Gorizontal skroll panelini yashirish */
  overflow-y: scroll; /* Vertikal skroll panelini qo'shish */
}

Barcha CSS Overflow Xususiyatlari

Xususiyat	Ta'rif
overflow	Agar kontent elementning qutisidan oshsa, nima bo'lishini belgilaydi
overflow-wrap	Agar uzun so'zlar konteyneridan oshsa, brauzer qatorlarni buzishi kerakmi yoki yo'qmi
overflow-x	Agar kontent elementning kontent maydoni ortiqcha bo'lsa, chap/o'ng chetlar bilan nima qilish kerakligini belgilaydi
overflow-y	Agar kontent elementning kontent maydoni ortiqcha bo'lsa, yuqori/pastki chetlar bilan nima qilish kerakligini belgilaydi

Ushbu sahifada