Global dasturchilar uchun CSS matn o'rami va toshqinini boshqarish bo'yicha to'liq qo'llanma. Mukammal, moslashuvchan maketlar yaratish uchun text-overflow, line-clamp, text-wrap: balance va shape-outside'ni o'rganing.
CSS Matn O'rami va Toshqinini O'zlashtirish: Matn Oqimi Chegaralarini Boshqarishga Chuqur Kirish
Veb-dizayn va dasturlash olamida kontent qirol hisoblanadi. Ammo to'g'ri taxtsiz qirol shunchaki chiroyli kiyimdagi odamdir. Matn, vebdagi kontentning asosiy shakli, nafislik, aniqlik va nazorat bilan taqdim etilishi kerak. Dizaynerlar murakkab setkalar, moslashuvchan konteynerlar va dinamik kontent bilan maket chegaralarini kengaytirar ekan, dasturchilar takrorlanadigan muammoga duch kelishadi: matn o'ziga belgilangan joyga toza sig'maganda uni qanday boshqaramiz? Aynan shu yerda matn oqimi chegaralarini boshqarish san'ati ishga tushadi.
Nazoratsiz matn buzilgan maketlarga, o'qib bo'lmaydigan kontentga va yomon foydalanuvchi tajribasiga olib kelishi mumkin. U konteynerlardan toshib chiqishi, noqulay bir so'zli qatorlarni (beva yoki yetimlar deb nomlanadi) yaratishi yoki dizayningizda katta, xunuk bo'shliqlarni qoldirishi mumkin. Yaxshiyamki, CSS itoatsiz matnni jilovlash uchun kuchli va rivojlanayotgan vositalar to'plamini taqdim etadi. Ushbu qo'llanma sizga matnni o'rash, toshqin va uning murakkab shakllar bilan o'zaro ta'sirini aniq nazorat qilish imkonini beruvchi xususiyatlarga chuqur kirish bo'lib, front-end mutaxassislarining global auditoriyasi uchun mo'ljallangan.
Biz fundamental `overflow` xususiyatidan boshlab, bir qatorli qisqartirish uchun klassik `text-overflow`gacha sayohat qilamiz, ko'p qatorli xulosalar uchun keng qo'llaniladigan `line-clamp`ni o'rganamiz va inqilobiy `text-wrap` xususiyati bilan kelajakka nazar tashlaymiz. Nihoyat, biz to'rtburchakdan xalos bo'lamiz va matnni maxsus shakllar atrofida oqizishni o'rganamiz, bu esa dizaynlaringiz nafaqat funksional, balki chinakam go'zal bo'lishini ta'minlaydi.
Ish maydonini tushunish: CSS Box Modeli va Oddiy Oqim
Matn qanday qilib toshib chiqishini nazorat qilishdan oldin, biz uning rioya qiladigan chegaralarini tushunishimiz kerak. CSS-da har bir element to'rtburchak qutidir. CSS Box Modeli deb nomlanuvchi ushbu kontseptsiya vebdagi maketning asosidir. Matn kontenti oddiy hujjat oqimi qoidalariga rioya qilgan holda ota-ona elementining kontent qutisi ichida oqadi.
O'z ichiga oluvchi blok: Sizning matningiz chegarasi
Matningizni o'z ichiga olgan element — bu `div`, `p` yoki `article` bo'ladimi — uning o'z ichiga oluvchi bloki hisoblanadi. Ushbu blokning o'lchamlari (kengligi va balandligi) matn egallashi kerak bo'lgan joyni belgilaydi. Standart bo'yicha, matn qatorning oxirgi chetiga (chapdan o'ngga yoziladigan tilda o'ng chetiga) yetganda, u yangi qatorga o'raladi. Bu standart xatti-harakat, `text-wrap: wrap;`. Muammolar matn miqdori o'z ichiga oluvchi blokda mavjud bo'lgan joydan gorizontal yoki vertikal ravishda oshib ketganda boshlanadi.
`overflow` Xususiyati: Birinchi Himoya Chizig'i
`overflow` xususiyati o'z ichiga oluvchi blokning "darvozaboni"dir. U kontent sig'maydigan darajada katta bo'lganda nima bo'lishi kerakligini belgilaydi. Bu matn toshqinining yanada o'ziga xos usullarini o'rganishdan oldin o'zlashtirishingiz kerak bo'lgan fundamental xususiyatdir.
- `overflow: visible;` (Standart): Bu standart holat. Kontent kesilmaydi va o'z konteynerining qutisidan tashqarida ko'rsatiladi. Bu ko'pincha matnning boshqa elementlar ustiga chiqib ketishiga olib keladi va tartibsiz, buzilgan maketni yaratadi.
- `overflow: hidden;`: Qutining chegaralaridan oshib ketgan har qanday kontent kesiladi va ko'rinmas bo'lib qoladi. Yashirin kontentni ko'rish uchun hech qanday mexanizm yo'q. Bu ko'plab matn qisqartirish usullari uchun muhim tarkibiy qismdir.
- `overflow: scroll;`: Kontent kesiladi, ammo brauzer foydalanuvchiga kontentning qolgan qismini ko'rish imkonini berish uchun aylantirish chiziqlarini (gorizontal va vertikal) taqdim etadi. Kontent sig'sa ham aylantirish chiziqlari mavjud bo'ladi.
- `overflow: auto;`: Bu `scroll`ga o'xshaydi, lekin u aqlliroq. Brauzer faqat kontent haqiqatan ham toshib chiqayotgan o'qda aylantirish chiziqlarini qo'shadi. Bu odatda toza foydalanuvchi interfeysi uchun `scroll`dan afzalroqdir.
`overflow` konteynerni boshqargan holda, matnning o'zi ustidan nozik nazoratni taklif qilmaydi. Bu qo'pol vosita: siz uni yoki to'liq ko'rasiz (va maketni buzishingiz mumkin), yoki butunlay yashirasiz, yoki aylantirish qutisiga joylaysiz. Aniqroq yechimlar uchun bizga yanada maxsus vositalar kerak.
Klassik Muammo: Bir Qatorli Toshqinni Boshqarish
Eng keng tarqalgan UI muammolaridan biri bu foydalanuvchi nomi, fayl nomi yoki jadval katakchasi kabi bitta qatorga sig'dirilishi kerak bo'lgan matn qismini ko'rsatishdir. Agar matn juda uzun bo'lsa, biz uning o'ralib, elementning balandligini oshirishini xohlamaymiz. Biz uni chiroyli tarzda qisqartirishni xohlaymiz.
`text-overflow: ellipsis` bilan tanishuv
`text-overflow` xususiyati aynan shu stsenariy uchun mo'ljallangan. U foydalanuvchilarga hozirda ko'rinib turganidan ko'ra ko'proq kontent borligini qanday bildirishni belgilaydi. Eng keng qo'llaniladigan qiymat `ellipsis` bo'lib, u qisqartirishni ko'rsatish uchun uch nuqta belgisini ('…') ko'rsatadi.
Biroq, `text-overflow: ellipsis;`ni yolg'iz qo'llash hech narsa qilmaydi. Bu birgalikda ishlashi kerak bo'lgan xususiyatlarning maxsus kombinatsiyasining bir qismidir.
Ellipsis uchun Uch Qismli Retsept
Bir qator matnni muvaffaqiyatli qisqartirish uchun sizga konteynerda ushbu uchta CSS xususiyati kerak bo'ladi:
- `overflow: hidden;`: Birinchidan, siz konteynerga uning chegaralaridan tashqariga oqib chiqadigan har qanday kontentni yashirishni aytishingiz kerak. Busiz matn shunchaki toshib chiqardi va `text-overflow` ta'sir qiladigan hech narsa bo'lmas edi.
- `white-space: nowrap;`: Keyin, siz matnning yangi qatorga o'ralishini oldini olishingiz kerak. Bu barcha matnni bitta gorizontal qatorda qolishga majbur qiladi va `overflow: hidden;` keyin kesishi mumkin bo'lgan toshqin holatini yaratadi.
- `text-overflow: ellipsis;`: Nihoyat, toshqin yashiringan va matn bir qatorda bo'lganda, siz ellipsisni qo'llashingiz mumkin. Endi brauzer matnni kesib, ko'rinadigan qator oxirida '…' belgisini qo'yadi.
Misol: Karta Sarlavhasini Qisqartirish
.card-title {
width: 250px; /* Ko'pincha qat'iy kenglik kerak bo'ladi */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #ccc;
padding: 10px;
}
Ushbu misolda, `.card-title` klassiga ega bo'lgan element ichidagi 250 pikseldan uzunroq har qanday matn kesiladi va uch nuqta ko'rsatiladi. Bu joy cheklangan UI komponentlari uchun toza, bir xil ko'rinish yaratadi.
Amaliy Qo'llanilish Holatlari va Cheklovlar
Ushbu usul quyidagilar uchun juda mos keladi:
- Uzun ma'lumotlar satrlari bo'lgan jadval katakchalari.
- Navigatsiya menyusi elementlari.
- O'zgaruvchan uzunlikdagi yorliqlar yoki teglar.
- Foydalanuvchi tomonidan yaratilgan kontentning oldindan ko'rinishi.
Bir Qatordan Tashqari: Ko'p Qatorli Qisqartirish San'ati
Blog posti yoki mahsulot tavsifining oldindan ko'rinishini, aytaylik, uch qator bilan cheklangan va oxirida uch nuqta bilan qanday ko'rsatasiz? Bu ancha murakkab muammo. Uzoq vaqt davomida yagona ishonchli yechimlar JavaScript-ni o'z ichiga olgan bo'lib, u matn balandligini hisoblab, kontentni qo'lda qirqib tashlardi. Bu yondashuv sekin, mo'rt va maxsus imkoniyatlarsiz bo'lishi mumkin edi. Yaxshiyamki, CSS-ga asoslangan yechim paydo bo'ldi.
Eski Usul: `-webkit-line-clamp`
`line-clamp` xususiyati standart bo'lmagan, lekin ajoyib darajada yaxshi qo'llab-quvvatlanadigan CSS xususiyati bo'lib, u blok konteynerining tarkibini belgilangan qatorlar soniga cheklash imkonini beradi. U hali ham `-webkit-` prefiksini olib yurgan bo'lsa-da, u Chrome, Firefox, Safari va Edge kabi barcha asosiy zamonaviy brauzerlarda ishlaydi, bu uni ishlab chiqarish uchun xavfsiz tanlovga aylantiradi.
`text-overflow` kabi, `line-clamp` ham yakka holda ishlamaydi. U to'g'ri ishlashi uchun ma'lum bir xususiyatlar to'plamini talab qiladi.
`line-clamp` Usulini Tahlil Qilish
Ko'p qatorli qisqartirishni amalga oshirish uchun sizga quyidagi CSS qoidalari kerak bo'ladi:
- `display: -webkit-box;`: Siz flexbox modelining eski versiyasidan foydalanishingiz kerak. Bu qatorni cheklash konteksti ishlashi uchun talabdir.
- `-webkit-box-orient: vertical;`: Bu `-webkit-box`ga o'zining ichki elementlarini vertikal yo'naltirishni aytadi.
- `overflow: hidden;`: Bir qatorli ellipsis bilan bo'lgani kabi, siz konteynerdan toshib chiqadigan kontentni yashirishingiz kerak.
- `-webkit-line-clamp: 3;`: Bu asosiy xususiyat. Butun son qiymati (bu holda `3`) kontent qisqartirilishi va uch nuqta qo'shilishidan oldin ko'rsatiladigan aniq qatorlar sonini belgilaydi.
Misol: Mahsulot Ta'rifi Ko'rinishi
.product-description {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 3 qator ko'rsatish */
overflow: hidden;
text-overflow: ellipsis; /* Ba'zi brauzerlar uchun zaxira variant */
max-height: 4.5em; /* Ixtiyoriy: line-clamp'ni qo'llab-quvvatlamaydigan brauzerlar uchun zaxira variant. (qator balandligi * qatorlar soni) */
line-height: 1.5em;
}
Ushbu kod parchasi matn paragrafini olib, faqat birinchi uch qatorni ko'rsatadi, so'ngra uch nuqta bilan tugaydi. Bu uzoq yillik muammoning toza, samarali va faqat CSS-ga asoslangan yechimidir.
Brauzerlarni Qo'llab-quvvatlashi va Ishlab Chiqarishga Tayyorligi
Standart bo'lmagan maqomiga qaramay, `-webkit-line-clamp` eng keng qo'llaniladigan va ishonchli xususiy CSS xususiyatlaridan biridir. Uning amalga oshirilishi Blink (Chrome, Edge), WebKit (Safari) va Gecko (Firefox) dvigatellarida izchil. Siz uni bugungi kunda ishlab chiqarish muhitida ishonch bilan ishlatishingiz mumkin.
Kelajak: Rasmiy `line-clamp` Xususiyati
CSS Overflow Module Level 3 spetsifikatsiyasi vendor prefiksisiz rasmiy `line-clamp` xususiyatini o'z ichiga oladi. U sodda, to'g'ridan-to'g'ri xususiyat bo'lishi ko'zda tutilgan. Biroq, standart versiyaning brauzerlarda joriy etilishi hali dastlabki bosqichlarda. Hozircha, `-webkit-` prefiksli versiya sanoat standarti bo'lib qolmoqda.
Tipografikaning Yangi Davri: Rivojlanayotgan `text-wrap` Xususiyati
Qisqartirish kontentni yashirish haqida bo'lsa, matnni o'rash kontentning ko'rinadigan maydoni ichida qanday oqishi haqidadir. CSS Text Module Level 4 ning bir qismi bo'lgan yangi `text-wrap` xususiyati, ayniqsa sarlavhalar va qisqa paragraflar uchun o'qish qulayligi va estetikasini yaxshilash maqsadida matn oqimini boshqarishning kuchli yangi usullarini taqdim etmoqda.
O'qish Osonligida Katta Sakrash: `text-wrap: balance`
Siz hech qachon shunday ko'rinadigan sarlavhani ko'rganmisiz?
Yangi va Kuchli bo'lganlarni O'zlashtirish
CSS Xususiyatlari
Birinchi qator ikkinchisidan ancha uzun bo'lib, vizual jihatdan nomutanosib va noqulay o'qish tajribasini yaratadi. `text-wrap: balance` bu muammoning o'yinni o'zgartiruvchi yechimidir. Elementga qo'llanilganda, u brauzerga qator uzunliklarini muvozanatlashni buyuradi va yanada nosimmetrik va yoqimli matn blokini yaratadi.
Brauzerning algoritmi shunga o'xshash narsani maqsad qiladi:
Yangi va Kuchli bo'lganlarni
O'zlashtirish CSS Xususiyatlari
Ushbu oddiy deklaratsiya sizning tipografikangizni sezilarli darajada yaxshilashi mumkin. Biroq, u samaradorlik evaziga keladi. Brauzer optimal o'rash nuqtasini topish uchun hisob-kitoblarni amalga oshirishi kerak. Shu sababli, `text-wrap: balance` hozirda faqat o'n qator yoki undan kam matn bloklari uchun mo'ljallangan. U quyidagilar uchun juda mos keladi:
- Sahifa sarlavhalari va nomlar (`h1`, `h2` va hk.)
- Blokli iqtiboslar
- Qisqa tavsiflovchi paragraflar
Misol: Balanslangan Sarlavha
h1.page-title {
text-wrap: balance;
}
Osilib qolgan So'zlarni Yo'qotish: `text-wrap: pretty`
Yana bir keng tarqalgan tipografik bezovtalik bu "yetim" — paragrafning oxirgi qatorida yolg'iz qolgan bitta so'z. U matn oqimida uzilish yaratadi va xunuk bo'shliq qoldiradi.
`text-wrap: pretty` bu muammoni hal qilish uchun mo'ljallangan yana bir yangi qiymatdir. U `balance`dan ko'ra nozikroq. U butun matn blokini qayta muvozanatlashga harakat qilmaydi; buning o'rniga, u shunchaki paragrafning oxirgi qatorida kamida ikkita so'z bo'lishini ta'minlaydi. U kerak bo'lganda oldingi qatordan bitta so'zni pastga tortib, osilib qolgan so'zlarni oldini oladi.
`balance`dan farqli o'laroq, `pretty` ancha past samaradorlik xarajatiga ega va butun maqolalar yoki blog postlari kabi uzunroq matnlarda ishlatilishi mumkin.
Misol: Asosiy Matnni Yaxshilash
article p {
text-wrap: pretty;
}
Progressiv Yaxshilash va Brauzerlarda Joriy Etilishi
2023-yil oxiriga kelib, `text-wrap: balance` va `text-wrap: pretty` zamonaviy Chromium-ga asoslangan brauzerlarda mavjud va boshqalarida joriy etilmoqda. Bu progressiv yaxshilash uchun ajoyib imkoniyatdir. Uni qo'llab-quvvatlaydigan brauzerlar yaxshilangan tipografiyaga ega bo'ladi, eski brauzerlar esa matnni har doimgidek ko'rsatadi. Bugun uni ishlatishdan hech qanday zarar yo'q.
Qutidan Chiqish: Matnni Maxsus Shakllar Atrofida O'rash
O'n yillar davomida veb-maketlar to'rtburchaklar bilan cheklangan edi. Matn to'rtburchak konteynerlarda oqardi, va rasmlar matn atrofida o'raladigan to'rtburchak bloklar edi. `shape-outside` xususiyati bu cheklovni buzadi va matnning doiralar, ellipslar va maxsus ko'pburchaklar kabi murakkab, to'rtburchak bo'lmagan shakllar atrofida o'ralishiga imkon beradi.
`shape-outside` bilan tanishuv: Moslashuvchan Maketlarning Kaliti
`shape-outside` xususiyati oqimda joylashtirilgan (floated) elementga qo'llaniladi. U atrofdagi matnning qator ichidagi kontenti o'raladigan shaklni belgilaydi. Elementning to'rtburchak qutisiga rioya qilish o'rniga, matn siz belgilagan shaklning konturlari bo'ylab silliq oqadi.
Shakllarni Aniqlash: Funksiyalar va Qiymatlar
`shape-outside` bir nechta asosiy shakl funksiyalarini qabul qiladi:
- `circle(radius at position)`: Doira shaklini belgilaydi. Misol: `circle(50% at 50% 50%)` elementni to'ldiradigan doira yaratadi.
- `ellipse(rx ry at position)`: Har xil gorizontal va vertikal radiuslarga ega elliptik shaklni belgilaydi.
- `inset(top right bottom left round border-radius)`: Elementning chetlaridan ichkariga joylashgan to'rtburchakni belgilaydi, ixtiyoriy yumaloq burchaklar bilan.
- `polygon(x1 y1, x2 y2, ...)`: Eng kuchli funksiya. U koordinata nuqtalari to'plamini belgilash orqali maxsus shakl yaratishga imkon beradi.
`url()` yordamida Rasmlarni Shakl Sifatida Ishlatish
Balki `shape-outside`ni ishlatishning eng intuitiv usuli bu rasmning URL manzilini taqdim etishdir. Matn o'sha rasmning shaffof bo'lmagan qismlari atrofida o'raladi.
.avatar {
float: left;
width: 150px;
height: 150px;
shape-outside: url('path/to/transparent-avatar.png');
shape-image-threshold: 0.5; /* Alfa kanali chegarasini belgilaydi */
}
`shape-image-threshold` xususiyati bu yerda muhim. U shakl chiziladigan shaffoflik darajasini (0.0 to'liq shaffofdan 1.0 to'liq shaffof bo'lmagangacha) belgilaydi. `0.5` qiymati 50% yoki undan ko'proq shaffof bo'lmagan har qanday piksel shakl chegarasining bir qismi bo'lishini anglatadi.
`shape-margin` yordamida Nozik Sozlash
Ko'pincha, siz matnning shaklga to'g'ridan-to'g'ri tegishini xohlamaysiz. `shape-margin` xususiyati shakl atrofida chekinish qo'shadi va matnni uzoqlashtirib, qulay bo'sh joy yaratadi.
.floated-element {
float: left;
shape-outside: circle(50%);
shape-margin: 1em; /* Doira atrofida 1em chekinish qo'shadi */
}
To'liq Misol: Foydalanuvchi Profili Kartasi
Keling, ushbu tushunchalarni birlashtirib, matn doira shaklidagi avatar atrofida o'raladigan profil yaratamiz.
.profile-card img {
float: left;
width: 120px;
height: 120px;
border-radius: 50%; /* Rasmni vizual ravishda doira qiladi */
margin-right: 20px;
/* Matnni o'rash uchun shaklni aniqlash */
shape-outside: circle(50%);
shape-margin: 10px;
}
.profile-card .bio {
text-align: justify;
}
Ushbu misolda, `bio` matni endi `img` elementining to'rtburchak qutisi atrofida o'ralmaydi. Buning o'rniga, u `shape-outside` tomonidan belgilangan doira shakli atrofida, 10px bo'shliq bilan chiroyli tarzda oqadi va professional, jurnalga o'xshash maket yaratadi.
Global Nuqtai Nazar: Xalqaro Kontekstlarda Matn Oqimi
Global auditoriya uchun dastur ishlab chiqayotganda, dizaynlarimizning turli tillar va yozuv rejimlariga qanday moslashishini hisobga olish juda muhim. Biz muhokama qilgan CSS xususiyatlari jismoniy emas, balki mantiqiy xususiyatlarga qurilgan, bu ularni xalqarolashtirish uchun mustahkam qiladi.
O'ngdan-Chapga (RTL) Yoziladigan Tillar
Arab, ibroniy yoki fors kabi o'ngdan chapga o'qiladigan tillar uchun brauzer hujjat yo'nalishi to'g'ri o'rnatilganda (masalan, `dir="rtl"`) ushbu matn oqimi xususiyatlarini avtomatik ravishda boshqaradi.
- `text-overflow: ellipsis;`: RTL kontekstida uch nuqta matn qutisining chap tomonida, o'sha o'qish yo'nalishidagi qator oxirida to'g'ri paydo bo'ladi.
- `shape-outside`: Agar siz elementni RTL maketida `right` (o'ng) tomonga oqimda joylashtirsangiz, matn uning atrofida chap tomondan to'g'ri o'raladi. Shakl funksiyalari matn yo'nalishidan mustaqil ishlaydi.
Vertikal Yozuv Rejimlari
Vertikal yozilishi mumkin bo'lgan Sharqiy Osiyo tillari (masalan, yapon, xitoy) uchun CSS `writing-mode` xususiyatini (`writing-mode: vertical-rl;` yoki `writing-mode: vertical-lr;`) taqdim etadi.
Zamonaviy matn toshqini va qisqartirish xususiyatlari ushbu rejimlar bilan ishlash uchun mo'ljallangan. Masalan, qatorni cheklash gorizontal qatorlar o'rniga vertikal matn ustunlarini cheklaydi. "Qator" tushunchasi yozuv yo'nalishiga moslashadi, bu esa ushbu vositalarni turli madaniyatlar bo'ylab nihoyatda ko'p qirrali qiladi.
Noma'lumlik uchun Dizayn: Dinamik Kontent
Global dasturda siz tarjima qilingan kontentning uzunligini bashorat qila olmaysiz. Ingliz tilida 5 belgidan iborat tugma yorlig'i nemis tilida 15 bo'lishi mumkin. Bu yerda muhokama qilingan matn oqimini boshqarish usullari har xil uzunlikdagi kontent bilan to'ldirilganda buzilmaydigan mustahkam komponentlarni yaratish uchun zarurdir. `text-overflow` va `line-clamp` dan foydalanish UI interfeysingiz ko'rsatilayotgan tildan qat'i nazar, izchil va toza bo'lib qolishini ta'minlaydi.
Xulosa: Matn Oqimini Nazorat Qilish
Matn - bu vebning yuragi va uning taqdimoti bizning eng katta e'tiborimizga loyiqdir. Standart xatti-harakatlardan tashqariga chiqib, biz o'qish uchun qulayroq, estetik jihatdan yoqimli va bardoshli tajribalar yarata olamiz. Biz matn oqimini har bir darajada qanday o'zlashtirishni ko'rib chiqdik:
- Bir Qatorli Nazorat: Toza, bashorat qilinadigan UI elementlari uchun `overflow: hidden`, `white-space: nowrap` va `text-overflow: ellipsis` uchligidan foydalanish.
- Ko'p Qatorli Xulosalar: JavaScriptsiz nafis kontent ko'rinishlari uchun kuchli va ishonchli `-webkit-line-clamp`ni qo'llash.
- Ilg'or Tipografika: Chiroyli sarlavhalar uchun `text-wrap: balance` va mukammal ishlangan paragraflar uchun `text-wrap: pretty` bilan kelajakni qabul qilish.
- Moslashuvchan, Organik Maketlar: Matn va media bir-biri bilan uyg'unlashadigan dinamik, jurnal sifatidagi dizaynlarni yaratish uchun `shape-outside` bilan to'rtburchakdan xalos bo'lish.
Ushbu CSS usullarini tushunish va qo'llash orqali siz matn bilan bog'liq har qanday maket muammosini hal qilish uchun o'zingizni qurollantirasiz. Siz nafaqat funksional, balki tipografik jihatdan to'g'ri va global miqyosda moslashuvchan interfeyslarni yaratishingiz mumkin. Keyingi safar matnning noto'g'ri harakat qilayotganini ko'rganingizda, uni jilovlash uchun vositalaringiz borligini bilasiz va potentsial maket tartibsizligini ongli va nafis dizayn bayonotiga aylantirasiz.