Overflow — visible, hidden, scroll, auto

~10 daq · CSS · Box Model va Matn

Muammodan boshlaylik

Uch holat:

1. Mahsulot kartochkasi balandligi 200px, lekin bir mahsulotning tavsifi juda uzun — matn kartochkadan tashqariga chiqib, pastdagi kartochkaning ustiga tushdi
2. Jadval telefonda ekrandan kengroq — butun sahifa gorizontal suriladigan bo'lib qoldi
3. Foydalanuvchi nomi Abdurahmonbekov_Muhammadali_2003 — kartochkaga sig'maydi va dizaynni buzadi

Kontent konteynerga sig'maganda nima bo'lishini overflow xususiyati boshqaradi.

Overflow nima

Konteyner o'lchami belgilangan (height, width, max-height), kontent esa kattaroq bo'lsa — kontent "toshib chiqadi" (overflow). Standart holatda brauzer uni ko'rsataveradi, konteyner chegarasidan tashqarida ham.

.card {
  height: 200px;
  overflow: visible;   /* standart */
}

To'rt qiymat

.izoh-oynasi {
  max-height: 300px;
  overflow: auto;      /* uzun bo'lsa — scroll, qisqa bo'lsa — oddiy */
}

Deyarli har doim scroll o'rniga auto ishlatiladi: bo'sh scroll paneli chiroyli emas.

hidden dan ehtiyot bo'ling: kontent yo'qoladi va foydalanuvchi unga yeta olmaydi. Faqat bezak elementlar uchun (masalan, yumaloq burchakli kartochkadan chiqib turgan rasm burchaklarini qirqish).

clip — hidden ning qat'iyroq varianti

.card {
  overflow: clip;
}

hidden dan farqi: kontentni dasturiy ravishda ham scroll qilib bo'lmaydi va (eng muhimi) element ichida position: sticky (23-dars) buzilmaydi. Shunchaki "chetdan chiqqanini kesib tashla" kerak bo'lganda — clip.

Yo'nalish bo'yicha

.table-wrap {
  overflow-x: auto;     /* gorizontal — kerak bo'lsa scroll */
  overflow-y: hidden;   /* vertikal — yo'q */
}

Darsning boshidagi 2-muammo — jadvalni o'rab olish:

<div class="table-wrap">
  <table>...</table>
</div>

.table-wrap {
  overflow-x: auto;
}

Endi telefonda faqat jadval gorizontal suriladi, butun sahifa emas. DevDocs dagi barcha jadvallar aynan shunday o'ralgan.

[!INFO] overflow-x va overflow-y ning biri visible emas bo'lsa, ikkinchisi ham avtomatik auto ga aylanadi. overflow-x: hidden; overflow-y: visible; — ishlamaydi, brauzer visible ni auto deb hisoblaydi.

Uzun matn bilan ishlash

Bir qatorda "..." bilan qisqartirish

.username {
  white-space: nowrap;       /* bitta qatorda */
  overflow: hidden;          /* sig'maganini yashirish */
  text-overflow: ellipsis;   /* oxiriga "…" */
}

Abdurahmonbekov_Muhammad… — 3-muammo hal. Uchala xususiyat birgalikda kerak, va element kengligi cheklangan bo'lishi kerak (blok yoki max-width).

Ko'p qatorli qisqartirish (masalan, kartochkada tavsifning faqat 3 qatori):

.tavsif {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

-webkit- prefiksiga qaramay, barcha zamonaviy brauzerlarda ishlaydi.

Uzun so'zni bo'lish

Bo'shliqsiz uzun matn (URL, email, uzun nom) konteynerdan chiqib ketadi, chunki brauzer so'zni bo'lmaydi:

.comment {
  overflow-wrap: anywhere;   /* kerak bo'lsa so'z o'rtasida bo'lish */
}

Foydalanuvchi yozgan har qanday matn (izohlar, nomlar, xabarlar) uchun shuni qo'yish tavsiya etiladi — kimdir albatta 200 belgili so'z yozadi.

Sahifa gorizontal "qochib ketsa"

Klassik muammo: telefonda butun sahifa chapga-o'ngga suriladi. Sababini topish:

* {
  outline: 1px solid red;
}

Hamma elementning chegarasi ko'rinadi — ekrandan chiqib turgan element darhol topiladi. Ko'pincha sabab: width: 100vw (scroll panelini hisobga olmaydi), qattiq width: 600px, uzun so'z yoki rasm.

[!WARNING] body { overflow-x: hidden; } — muammoni yashiradi, hal qilmaydi. U position: sticky ni buzishi va iOS da g'alati xatti-harakatlarga olib kelishi mumkin. Avval kengayib ketgan elementni toping va uni tuzating.

Scroll ni chiroyliroq qilish

.chat {
  overflow-y: auto;
  scroll-behavior: smooth;        /* JavaScript scroll — silliq */
  overscroll-behavior: contain;   /* ichki scroll tugaganda sahifa surilmasin */
  scrollbar-gutter: stable;       /* scroll paneli paydo bo'lganda kontent "sakramasin" */
}

overscroll-behavior: contain — modal oyna va chat oynalari uchun juda foydali: foydalanuvchi oyna oxirigacha surganda, orqadagi sahifa surilib ketmaydi.

Nima uchun shunday?

Nima uchun standart qiymat visible — kontentni yashirish yoki scroll qilish xavfsizroq emasmi?

Chunki CSS ning asosiy tamoyili — ma'lumotni yo'qotmaslik. Agar standart hidden bo'lsa, dasturchi kutilmagan holatni (uzun tarjima, katta shrift, boshqa ekran) oldindan ko'rmagan bo'lsa, foydalanuvchi kontentni umuman ko'rmay qoladi va buni hech kim bilmaydi. visible bilan esa muammo ko'rinadi — dizayn buziladi, lekin ma'lumot o'qiladi va xato tez topiladi. Ko'rish qobiliyati past foydalanuvchilar shriftni 200% ga kattalashtirganda bu ayniqsa muhim. Qirqish va scroll — ongli qaror bo'lishi kerak, tasodifiy standart emas.

Xulosa

Eslab qoling:

• overflow — kontent konteynerga sig'maganda nima bo'lishi
• visible (standart), hidden, scroll, auto — deyarli har doim auto
• clip — qat'iy qirqish, sticky ni buzmaydi
• overflow-x: auto — keng jadval va kodlar uchun o'ram
• Bir qatorda "…": white-space: nowrap + overflow: hidden + text-overflow: ellipsis
• Ko'p qator: -webkit-line-clamp
• Uzun so'zlar: overflow-wrap: anywhere
• Sahifa gorizontal qochsa — sababini toping, overflow-x: hidden bilan yashirmang

Keyingi dars

11-dars: CSS Units — px, em, rem, %, vw, vh, ch