CSS va HTML-dan foydalangan holda aylantirish matnli qutini yarating
HTML o'tish oynasi, qutining mazmuni qutining o'lchamlaridan kattaroq bo'lsa, o'ng va pastga aylantirish varaqlarini qo'shadigan quti. Boshqacha aytganda, agar sizda 50 ta so'zga mos keladigan quti bo'lsa va sizda 200 so'zli matn bo'lsa, HTML varaqchasi qo'shimcha 150 so'zni ko'rsata olasiz. Standart matnda faqat qo'shimcha matnni qutining tashqarisiga surish mumkin.
HTML skrolini o'ynash juda oson. Siz aylantirishni istagan elementning kengligi va balandligini belgilashingiz kerak, keyin esa qanday o'tishni xohlashingizni belgilash uchun CSS ko'chirish xususiyatidan foydalaning.
Qo'shimcha matn bilan nima qilish kerak?
Mizanpajingizda bo'sh joyga mos keladigan qo'shimcha matn bo'lsa, sizda bir nechta variant bor:
- Matnni qisqartirishi va qayta tiklanishi uchun qayta yozing.
- Matn chegaralaridan tashqariga chiqishga ruxsat bering va bu tartibni qo'llab-quvvatlash uchun moslashuvchan bo'lishi mumkinligiga umid qil.
- Matnni to'kib tashlang.
- O'tish paneli qo'shimchalar (odatda matn uchun vertikal).
Eng yaxshi variant odatda oxirgi variant: aylantirish matn qutisi yaratish. Keyin qo'shimcha matnni o'qish mumkin, lekin sizning dizayningiz buzilmaydi.
Buning uchun HTML va CSS-chi:
Ko'tarilish: avtomatik; brauzerda matnni div chegaralarini to'ldirish uchun kerak bo'lganda scrollbar qo'shishni bildiradi. Lekin, bu ishlash uchun, shuningdek, div-ga o'rnatilgan kenglik va balandlikning uslubi xususiyatlariga ega bo'lishingiz kerak.
Bundan tashqari, siz toshni o'zgartirib, matnni kesib qo'yishingiz mumkin: auto; to'lib toshish uchun: maxfiy. Agar siz toshqin xususiyatni tashlab qo'ysangiz, matn divning chegarasidan chiqib ketadi.
O'tkazish satrlarini faqat matndan ko'proq qo'shishingiz mumkin
Agar siz kichikroq joylarda ko'rsatmoqchi bo'lgan katta rasmga ega bo'lsangiz, matn atrofida aylana chiziqlarini qo'shishingiz mumkin.
Ushbu misolda 400x509 tasvir 300x300 xat boshida.
Jadvallar aylantirish chizmalaridan foydalanishlari mumkin
Uzoq ma'lumotli jadvallar juda tez o'qilishi juda qiyin, lekin ularni cheklangan hajmdagi divga qo'yib, ortiqcha xususiyatini qo'shib, sahifangizda haddan tashqari bo'sh joyga ega bo'lmagan ko'p ma'lumotli jadvallarni yaratishingiz mumkin .
Eng oson yo'li tasvirlar va matn bilan o'xshashdir, faqat jadval atrofida div qo'shing, o'sha divning kengligi va balandligini o'rnating va ortiqcha xususiyatini qo'shing:
| Ism | Telefon | 502-5366 Buni amalga oshirganingizda sodir bo'ladigan narsa gorizontal aylantirish paneli odatda paydo bo'ladi, chunki brauzer skriptlar kromining stolni bir-biriga ulashayotganini ta'kidlaydi. Buni stolning kengligi va boshqalarni o'zgartirishdan xalos qilishning ko'plab usullari mavjud. Lekin mening eng sevganim - CSS 3 xususiyati toshib-x bilan gorizontal aylantirishni o'chirib qo'yishdir. Faqat toshqinni qo'shing-x: yashirin; gorizontal aylantirish chizig'ini olib tashlaydi. Buni tekshirib ko'ring, chunki yo'qolgan kontent bo'lishi mumkin. Firefox Tovushlar uchun TBODY teglaridan foydalanishni qo'llab-quvvatlaydiFirefox brauzerining juda yaxshi xususiyatlaridan biri shundaki, siz toshbo'ron qilish xususiyatini tne va thead yoki tfoot kabi ichki jadval teglaridan foydalanishingiz mumkin. Ya'ni, jadval tarkibiga o'tish majmuasini o'rnatishingiz mumkin va ustki hujayralar ularni yuqoriga ko'tarib turadi. Bu faqat Firefox-da ishlaydi, bu juda yomondir, ammo sizning o'quvchilaringiz faqat "Firefox" dan foydalansalar yaxshi xususiyatdir. Nimani nazarda tutishim uchun Firefox-da ushbu misolni ko'rib chiqing.
|
|---|