HTML / CSS / JavaScript
July 4, 2019

Overflow xossasi

CSS overfloe xossasi juda katta kontentni maydoni ichiga moslashtirishni nazorat qilish uchun ishlatiladi.


Overflow

Overflow xossasni kontentni qisqartirish, unga scrollbar qo'shish mumkin, qachonki unga belgilangan maydonga kontent sig'masa.

overflow xossasi quyidagi qiymatlarga ega:

  • visible - Standart. Kontent qisqartirilmaydi.
  • hidden - Kontent qisqartiradi, kontentning qolgan qismi ko'rinmaydi.
  • scroll - Kontent qisqartiradi, kontentning qolgan qismiga scrollbar qo'shiladi.
  • auto - scroll ga o'xshash, ammo u scrollbarni kerak paytda qo'shadi.

overflow: visible

Standart, overflow ko'rimishli, ya'ni kontent qisqartirilmaydi va element qutisi tashqarisi ko'rinadi.


overflow: hidden

hidden qiymati kiritilganda, overflow qisqartiriladi va kontentning qolgan qismi ko'rinmaydi:

foto

overflow: scroll

scroll qiymatini qo'shsangiz, overflow qisqaradi va element qutisi ichiga scrollbar qo'shiladi. Yodda tuting, scroll qiymati gorizantal va vertikal scrollbar qo'shadi.

foto

overflow: auto

auto qiymati scroll bilan o'xshash, ammo u scrollbarlarni kerak bo'lganda qo'shadi:

foto

overflow-x va overflow-y

overflow-x va overflow-y xossasi kontentning overflowini gorizontal yoki vertikal(yoki ikkovi) ga o'zgartirishni belgilaydi:

  • overflow-x kontentning o'ng/chap qirralari bilan ishlashni ifodalaydi.
  • overflow-y kontentning tepa/past qirralari bilan ishlashni ifodalaydi.
foto

Sanjar Sobirjonov | t.me/tutorialsuz