Css to'lib ketishi CSS-dan foydalanib, qator oxirida Trikrapka. Barcha brauzerlar uchun qoldiq kod

CSS3 hack - bu veb-dizaynerlarning kundalik hayotidagi inqilobiy o'zgarish. CSS3 bugungi kunda bizni hayratda qoldirishdan to'xtamaydi. Ilgari JavaScript yordamida kamroq bajarilishi mumkin bo'lgan so'zlar, endi CSS3 bilan ishlash oson. Masalan, Text-Overflow kuchi.

Ba'zan saytlarni yaratish jarayonida biz keyingi qatorga o'tmasdan dinamik matnning bir qismini olishimiz kerak. Belgilangan kenglikdagi jadvalga yangi matn kiritish uchun. Aynan shu soatda koristuvachevga matnning bir qismi ko'rinib turganini ko'rsatish kerak - bu hammasi. Yana bir qism yopishtirilgan. Tripodlar yordami uchun shunga o'xshash narsalarni ko'rsatishingiz mumkin (...).

CSS3 yordamida biz CSS matn to'lib-toshgan kuchini osongina yaratishimiz mumkin

Rozmytka

matnni to'ldirish: ellips;

Qiymat ellips matnga trikrapka qo'shishga ruxsat bering (...)

Quvvat matni: ellipsis korisna, agar:

1. O'rtadan tashqariga chiqish uchun matn
2. O‘rtada katta bo‘shliq bor: nowrap.

Bizda ma'lumotlar bazasidan kompaniyalar nomlarini ko'rsatish uchun kengligi 150 piksel bo'lgan div mavjud. Ale, biz kim bilan bo'lishni xohlamaymiz, shuning uchun kompaniyalarning eski nomlari yangi qatorga o'tdi va psuali eski ko'rinish jadvallar. Shunday qilib, biz 150 pikseldan oshiq matnga mos kelishimiz kerak. Biz ham koristuvachga tse haqida aytib bermoqchimiz. Sob vín mav on uvazi, scho hamma nomi ko'rinmaydi. Men ayiqning ustiga o'tayotganda butun matn ko'rsatilishini xohlayman.

Keling, buni qanday qilishimiz mumkinligini ko'rib chiqaylik CSS-ga yordam bering 3.

Kompaniyani o'rash ul li (
matnni to'ldirish: ellips;
toshib ketish: yashirin;
oq bo'sh joy:nowrap; )

Brauzerni qo'llab-quvvatlash

Brauzerlar orasida yordam uchun berilgan kuchê bitta kichik nuance. Hamma narsa, krim firefox, mo''jizaviy tarzda to'g'ri. Ale, omad uchun, ê virishennya tsíêí muammolar!

Firefox-da Trikrapka

Afsuski, gekko (yon ko'rinish mexanizmi) Firefox bu quvvatni qo'llab-quvvatlamaydi. Biroq, brauzer XBL-ni qo'llab-quvvatlaydi, uning yordami bilan biz uni bu vaziyatdan olib tashlashimiz mumkin.

Gekko- Veb-sahifalarni ko'rish uchun asosiy vosita (inglizcha layout mexanizmi) Mozilla brauzeri Firefox, Netscape va boshqalar. Eski nomlar - "Raptor" va "NGLayout". Gekkoning asosiy kontseptsiyasi HTML, CSS, W3C DOM, XML 1.0 va JavaScript kabi Internet standartlaridan ilhomlangan. Yana bir tushuncha o'zaro platformalardir. Bugun Gecko ustida ishlamoqda operatsion tizimlar Linux, Mac OS X, FreeBSD va Microsoft Windows, shuningdek, Solaris, HP-UX, AIX, Irix, OS/2, OpenVMS, BeOS, Amiga va boshqalar.

Firefox-da uch rangni ko'rsatish uchun uslublar jadvaliga bitta qator qo'shishimiz kerak.

Agar siz uni yoqishni istasangiz, shunchaki qo'shing:

moz-binding: url("bindings.xml#none");

Keyingi qadam uslublar jadvali saqlanadigan maydonda bindings.xml faylini yaratishdir. Biz vikoristovuvati bo'lishi mumkin matn muharriri kimdan! Quyidagi koddan nusxa oling va faylga bindings.xml nom bering.

document.getAnonymousNodes(bu)[ 0 ]
this.label.style
this.style.display
agar(this.style.display != val) this.style.display= val

bu.label.qiymat
agar(this.label.value != val) this.label.value= val



var strings= this.textContent.split(/\s+/g)
if(!strings[ 0 ]) strings.shift()
if(!strings[ strings.length - 1 ]) strings.pop()
this.value=strings.join(" ")
this.display=strings.length? "" : "yo'q"


this.update()


this.update()

Barcha brauzerlar uchun qoldiq kod

Kompaniyani o'rash ul li (
matnni to'ldirish: ellips;
-o-matnni to'ldirish: ellipsis;
-moz-binding: url("bindings.xml#ellipsis");
oq bo'shliq: nowrap;
toshib ketish: yashirin;
}

CSS3 butun dunyo bo'ylab veb-dizaynerning minimal kodli ilgari ishlamayotgan saytlarni yaratish uchun mo'ljallangan vositasiga aylanmoqda. Bu oddiy, tom ma'noda bir qatorda, yechim, agar ilgari bu mumkin bo'lsa Photoshop-ga yordam bering yoki JavaScript. Bugun CSS3 va HTML5 imkoniyatlarini ko‘rib chiqing va aldanib qolmaysiz!

Tarjimonlarning kulrang massasidan ko'rinib, sizning hamdardligingizni qozonish uchun, mening darslarim kabi, dono fikrlar va aforizmlar bo'ladi. Bu qatorlardagi Kozhen o'zinikini biladi :)

O'zgartira olmaydigan narsalarni yaxshilik bilan davom ettiring.

Boy kimdir, agar matnni bir qatorga qo'yish kerak bo'lsa, muammoni hal qiladi. Bunday holda, matn yanada uzunroq bo'lishi mumkin va matnni topish mumkin bo'lgan blokning kengligi, agar siz brauzer oynasining bir xil o'lchamini xohlasangiz, ovoz bilan o'ralgan. Boshqa tomondan, matnni to'ldirish kuchi ixtiro qilingan, chunki u CSS3 tavsiyasiga kiritilgan va ilgari IE6 da uzoq vaqt oldin amalga oshirilgan. Agar blok uchun boshqa quvvat tanlovi mavjud bo'lsa, agar matn pastki blokning o'zi kengligi uchun kattaroq bo'lsa, u holda matn hosil bo'ladi va oxirida nuqta qo'yiladi. Garchi bu erda hamma narsa juda oddiy bo'lmasa-da, lekin keling, yilning troshiga qaytaylik.
Z Internet Explorer"Oh, hamma narsa aniqlandi, boshqa brauzerlar-chi? Men xohlayman hozirgi moment CSS3 spetsifikatsiyalari quvvat matnini to‘ldirish o‘chirilgan, Safari yoga yoqilgan (3-versiyadan qabul qilingan), Opera ham (9-versiyasidan beri, lekin quvvat -o-overflow-text deb ataladi). Va Firefox - ni, pídrimuê emas, men 3-versiyasida navít bo'lmayman. Xulosa, lekin haqiqat. Ale, ehtimol, scroobiti qila olasizmi?

Zrobiti, zvysno, mumkin. Agar shukav bilan Internetda kuch haydovchi, va yak ız cim Firefox dan, bilan o'tkazgan. qarorlarni kechiring. Yechimning mohiyati:

Hammadan mendan. Tafsilotlar uchun maqolani o'qing.
Yechim yomon emas, lekin muammolar mavjud:

1. Matn xatning o'rtasida (aqliy ko'rinishda) va ko'proq yoki kamroq "do'qmoq" bilan kesilishi mumkin.
2. Agar matn blokning kengligidan kichikroq bo'lsa, boy dog' har doim ko'rsatiladi (shuning uchun u yangisidan yo'qolmaydi va dog' kerak emas).

Avval Croc

Kob uchun biz boshqa muammolarga e'tibor qaratamiz, lekin kerak bo'lmaganda dog'dan qanday qutulish kerak. Boshingizni sindirib, "trochlar" bilan tajriba o'tkazganingizdan so'ng, siz qarorga javobni bilasiz. Men tushuntirishga harakat qilaman.
Xulosa shuki, bizga uchta ko'pikli okremy bloki kerak, agar matn kengligida juda ko'p joy olsa, paydo bo'lishi ehtimoli kamroq. Keyin men suzuvchi blok haqida fikrga keldim. Men qo'rqinchli ovoz istayman, lekin bu erda, zavzhdi bo'lgan ko'chada bir blok kamroq bor, va o'ngga siqib, lekin matn kengligi katta bo'ladi, agar qadam liniyasi matn vishtovhuê blok.
Keling, amaliyotga o'tamiz, aks holda tushuntirish muhimdir. Keling, HTML strukturasini o'rnatamiz:

juda uzun matn

Hatto ixcham emas, lekin menda kichikroq yo'q edi. Bundan tashqari, bizda DIV.ellipsis blokli konteyner bo'lishi mumkin, bizning matnimiz bilan blok yana bitta blokdir, bu bagatokrapkaga loyiqdir. Hurmat bilan, "uch nuqtali blok" haqiqatan ham bo'sh, hatto biz uchta nuqta kiritishimiz shart bo'lmasa ham, agar biz matnni ko'chirsak. Bundan tashqari, qo'shimcha sinflar mavjudligiga berilish mumkin emas, ushbu tuzilmaning parchalari yordam uchun yaxshi ko'rib chiqiladi. CSS selektorlari. Va i o'qi CSS-ning o'zi:

.ellipsis (toshib: yashirin; oq boʻshliq: nowrap; chiziq balandligi: 1.2em; balandlik: 1.2em; chegara: 1px toʻliq qizil; ) .ellipsis > DIV:birinchi bola ( float: chap; ) .ellipsis > DIV + DIV (float: o'ngda; chetidan tepada: -1,2em;).

Hammadan mendan. Firefox, Opera, Safari-da nima ishlayotganini va mo'ljallanganligini ko'rib chiqamiz va qayta ko'rib chiqamiz. IE ajoyib natijaga ega, ammo natija ortiqcha. IE6 da hamma narsa noto'g'ri ketdi, lekin IE7 da u ishlamayapti, chunki u yaratilgan tarkibni qo'llab-quvvatlamaydi. Ale IE, keling, aylanaylik.

Hozircha buni tushunish qiyinroq. Birinchidan, biz asosiy blokning satr balandligi va balandligini o'rnatamiz, shuning uchun biz blokning balandligi va matn chizig'ining balandligini bilishimiz kerak. Qiymatlar uch nuqtali chet bloki uchun, shuningdek, salbiy qiymatlar uchun o'rnatiladi. Ushbu tartibda, agar blok keyingi qatorga "tashlanmagan" bo'lsa, biz matn qatorini (bir qatorda) oshiramiz, agar u tashlansa, biz teng bo'lamiz (aslida, sharob pastroq, biz faqat robimo uni bir qator yuqoriga tortamiz). Zaveni biriktirish uchun, ayniqsa, dog'ni ko'rsatish kerak bo'lmasa, biz to'lib ketishimiz mumkin: asosiy blok uchun yashirin, shuning uchun dog' chiziqdan balandroq bo'lsa, u ko'rsatilmaydi. Bu bizga blokdan tashqarida (o'ng chetida) tushgan matnni tartibga solish imkonini beradi. Matnni o'tkazmasdan o'tkazib bo'lmaydi va blokni pastki va pastki uchli dog'lar, oq bo'shliq bilan o'tkazmaslik uchun: nowrap, uni o'zingiz o'tkazish xavfsiz - bizning matnimiz bir qatorda bo'ladi. Matnli blok uchun biz floatni o'rnatdik: chap, shuning uchun biz blokni uch marta dog'lar bilan nomlamadik va minimal kenglikni oldik. Asosiy blok (DIV.ellipsis) o'rtasida ikkita suzuvchi blok mavjud bo'lganligi sababli (float: chap/o'ng), keyin asosiy blok qulab tushadi, agar matnli blok bo'sh bo'lsa, biz asosiy blok uchun qattiq balandlikni o'rnatamiz. blok (balandligi: 1,2em). Xo'sh, to'xtating, vikorist pseudo-element :: fermentatsiyalash uchun. Ushbu psevdo-element uchun siz fonni ham o'rnatishingiz mumkin, shunda siz unga dam olishingiz uchun matnni bekor qilishingiz mumkin. Biz asosiy blok uchun ramka o'rnatdik, faqat blokning o'lchamlarini yaxshilash uchun, bu biz uchun yaxshiroqdir.
Firefox kabi, Opera va Safari, shdo í̈x pozitsiyasi (zavdannya í̈m joy/float va h.k.) kabi pídtrimuvav psevdo-elementlar kabi va mehribonlik bilan ellips uchun katta blokdan foydalanish mumkin. Qolgan 3 ta qoidani hujumga almashtirishga harakat qiling:

.ellipsis > DIV:first-child::after ( float: o'ngda; kontent: "..."; chekka tepa: -1,2em; fon rangi: oq; pozitsiya: nisbatan; )

Opera va Safari-da hamma narsa avvalgidek ishlaydi va uchta dog'li qo'shimcha bloksiz. Firefox o'qi esa bo'kirayapti. Yangi mirobimo yechimi uchun ham xuddi shunday. Xo'sh, siz kob HTML tuzilmasi bilan ishlashingiz mumkin.

Croc boshqa

Esingizda bo'lsa, biz muammoga duch keldik va agar matn blokga siqilgan bo'lsa, dog'lar paydo bo'ldi. Biroq, biz yana bir muammoni yo'qotdik - matn harflar o'rtasida shakllanadi. Ungacha IE ishlamaydi. Ushbu muammolarni bartaraf etish uchun brauzerlar uchun odatiy matnni to'ldirish qoidasini buzish kerak va faqat Firefox boshqa yechimni buzishi kerak (muqobil yo'q). "Faqat Firefox uchun" yechimni qanday ishlab chiqish kerakligi keyinroq tahlil qilinadi, lekin shu bilan birga biz matn to'la bo'lmaganlarini ham ishlab chiqishga harakat qilamiz. CSS-ni tuzatish:

.ellipsis (to‘ldirilishi: yashirin; oq bo‘shliq: nowrap; chiziq balandligi: 1,2 m; balandlik: 1,2 m; chegara: 1px to‘liq qizil; matnni to'ldirish: ellips; -o-matnni to'ldirish: ellipsis; kengligi: 100% } . ellipsis * (ekran: inline; ) / *.ellipsis > DIV:birinchi bola ( float: chap; ) .ellipsis > DIV + DIV ( float: o'ng; chekka-yuqori: -1,2em; ) .ellipsis > DIV + DIV::after ( fon rangi: oq; Tarkib: "...";) */

Ma'lum bo'lishicha, qoida boy emas. Asosiy blokning uslubi uchta qatordan iborat. Ulardan ikkitasi matnni to'ldirishni o'z ichiga oladi. Kenglik kengligini o'rnatish: IE uchun 100% kerak, shuning uchun matn blokni cheksizgacha kengaytirmaydi, bu matnni to'ldirish kuchi ishladi; Vlasne, biz kenglikni toraytirdik. DIV g'oyasiga ko'ra, barcha blok elementlari singari, ular konteynerning butun kengligi va kengligi bo'ylab kengayadi: 100% nimaga bog'liq emas va navigatsiya qilish mumkin emas, lekin IEda tartib muammosi bor, lekin konteyner har doim kontent o'lchovlaridan tashqariga chiqishi kerak, aks holda bu mumkin emas. Shuningdek, biz barcha ichki elementlarni inline (inline) qilib qo'ydik, shuning uchun ba'zi brauzerlarda (Safari va Opera) matn to'lib-toshish hali ham ishlamaydi, chunki o'rtada blok elementlari mavjud. Biz qolgan uchta qoidani sharhlab berdik ushbu maxsus turga badbo'y hid kerak emas va hamma narsa buziladi (mojaro). Ushbu qoidalar Firefox uchun talab qilinadi.
Keling, ichimizga nima kelib-ketganiga hayron bo'laylik.

Krok uchinchi

Agar men birinchi marta yon tomonga qaragan bo'lsam (bundan oldin, men ushbu maqolani yozmoqchi bo'lganimda), men o'zimning boshimga qaradim, keyin qiziqish uchun, mantiqiy mavzudagi sharhlarga qaradim. aqlli g'oyalar. Bilaman, sharhlarda bu Firefox va IE kabi boshqa yechim haqida edi (bu odamlar uchun, birinchi maqola muallifi kabi, boshqa brauzerlar, ehtimol yo'q). Shunday qilib, eksa, mening fikrimcha, muallif hali ham bu hodisa bilan kurashishi kerak (matnni to'ldirishni o'z ichiga oladi), navisuyuchi obrobnikov sub-toshib va ​​quyi oqim elementlari bo'yicha, buning uchun agar kerak bo'lsa, nuqta qo'yish kerak edi. Bu yomon emas, lekin men uchun boshqa yo'lni hal qilish yaxshiroq (resurs rejasida), bu ko'proq, yangi narsa uchun yaxshiroqdir. Biroq, unga qanday erishish mumkinligini tushunishga harakat qilib, cicada narsasiga qoqilib, va CSS kuchi-moz-bog'lash. Bir oz tushundim, bu IEdagi xatti-harakatlarning analogidir, ammo boshqa sous va sovutgich bilan. Ammo tafsilotlarga kirmaylik, aytaylik, shu tarzda CSS yordami ortidagi elementga JavaScript qo‘shishingiz mumkin. Ovoz ajoyib, ale tse pracyuê. Biz nima qilamiz:

.ellipsis (to‘ldirilishi: yashirin; oq bo‘shliq: nowrap; chiziq balandligi: 1,2 m; balandlik: 1,2 m; hoshiya: 1px to‘liq qizil; matnning to‘lib ketishi: ellips; -o-matnni to‘ldirish: ellips; kenglik: 100% ; -moz-bog'lash: url (moz_fix.xml#ellipsis); kattalashtirish: 1;) .ellipsis * (ekran: inline; ) .moz-ellipsis > DIV:birinchi bola(suzuvchi: chap; displey: blok; } .moz-ellipsis > DIV + DIV(suzuvchi: o'ngda; chetidan tepada: -1,2em; displey: blok; } .moz-ellipsis > DIV + DIV :: keyin(fon rangi: oq; kontent: "..."; )

Ko'rib turganingizdek, biz yana kichik o'zgarishlar qildik. IE7-ning ushbu bosqichida ajoyib xatolik yuz beradi, hamma narsa egri, shuning uchun siz kattalashtirishni o'rnatmaysiz: asosiy blok uchun 1 (eng oddiy variant). Yakshcho qoidani tartibga soling (vidaliti, sharhlang). Hammasi ajoyib, agar kimdir o'ng tomonda nima uchun ekanligini bilsa, menga xabar bering. Keling, masshtabni aylanib chiqaylik: 1 va Firefox-ga o'tamiz.
Power -moz-binding moz_fix.xml faylini ellips identifikatori bilan ko'rsatma bilan o'z ichiga oladi. Vmist tsgogo xml fayli oyoqlari:

Ushbu konstruktor bilan ishlash uchun siz selektor yaratgan elementgacha moz-ellipsis sinfini qo'shing. U faqat Firefox (gecko brauzerlari?) bilan ishlaydi, keyin faqat yangi elementga moz-ellipsis klassi qo'shiladi va biz ushbu sinf uchun qo'shishimiz mumkin. qo'shimcha qoidalar. Nima qilding. Menimcha, this.style.mozBinding = "", uni xavfsiz o'ynash yaxshiroq bo'lsa ham kerak emas (chunki men Firefox tomoni haqida ko'p narsa bilmayman, men bunga rahm qila olaman).
Siz ushbu yuklab olishda joriy JavaScript faylini qidirayotgan bo'lishingiz mumkin. Lykatisya emas. Avvalo, faylga ishlov berilmaydi va/yoki JavaScript qo'shilmaydi, hammasi joyida, bu katta ish emas, blok tugallangandan keyin matn ko'rsatiladi. Tobto, bu turdagi vaziyatda, u "non-qattiq" yechim qabul qilish mumkin. Siz o'zingizni o'zgartirishingiz mumkin.

Shunday qilib, biz Opera, Safari va IE uchun matn to'ldirishni amalga oshiradigan "Buyuk to'rtlik" brauzerlari uchun uslubni olib tashladik, Firefox uchun esa yo'q, lekin hech narsadan qisqaroq.

Kvartiralar

Qaysi joyga joy qo'yishingiz mumkin yoki bizning yechimimizni biroz yaxshilashni xohlaysiz. Qanday qilib biz konstruktorni istalgan blokga qo'yishimiz mumkin va kelajakda biz uni nazorat qilamiz, nima uchun cimni tezlashtirmaslik kerak. Keling, tuzilmamizni soddalashtiraylik:

juda uzun matn

Oh, shunday! O'ylaymanki, siz meni kutishingiz mumkin - sizga kerak bo'lgan narsa!
Keling, barchasini uslubda ko'rib chiqaylik:

.ellipsis (to‘ldirilishi: yashirin; oq bo‘shliq: nowrap; chiziq balandligi: 1,2 m; balandlik: 1,2 m; matnning to‘lib ketishi: ellips; -o-matnning to‘lib ketishi: ellips; kenglik: 100%; -moz-bog‘lash: url(moz_fix.xml#ellipsis); ) .moz-ellipsis > DIV:birinchi bola ( float: chap; ) .moz-ellipsis > DIV + DIV ( float: o‘ng; chekka tepa: -1,2em; ) .moz -ellipsis > DIV + DIV :: keyin (fon rangi: oq; tarkib: "..."; )

Mi nareshti qizil ramkani tartibga keltirdi :)
Va endi biz moz_fix.xml ga biroz ko'proq qo'shamiz:

Bu yerda nima bo'lyapti? Biz HTML kobi tuzilmamizni qayta ixtiro qilamiz. Tobto te bloklari bilan katlama robyatsya avtomatik, í Firefox kamroq. JavaScript kodi eng yaxshi an'analarda yozish :)
Afsuski, vaziyat, agar matn xatning o'rtasida tuzilgan bo'lsa, biz g'oyib bo'la olmaymiz (to'g'ri, bu mumkin, Timchasovo, shuning uchun mening qarorim hali ham yaxshiroq va kelajakda biz buni ko'rishimiz mumkin). Ammo biz ta'sirni biroz yumshata olamiz. Buning uchun bizga rasm (shaffof gradientli tanadan yaxshiroq) va uslubdagi uchta o'zgarish kerak:

.moz-ellipsis > DIV:birinchi bola (float: chap; o'ng chekka: -26px;) .moz-ellipsis > DIV + DIV ( float: o'ng; chet-yuqori: -1,2em; fon: url(ellipsis.png) takrorlash-y; padding-chap: 26px; }

Biz hayotdan hayratlanamiz va zavqlanamiz.

Uning ustiga biz dog'ni qo'yamiz.

Visnovok

Uchinchi tomon maketi uchun kichik dumba olib kelaman. Men Vikipediya sahifalaridan birining o'zgarishini oldim (birinchi bo'lib chiqdi) va yangi tavsiflar uchun boshqa usul qo'shdim.
Vzagali berilgan qaror faqat cho'zilgan holda universal deb atash mumkin. Hammasi sizning tartibingiz va katlamangizda bo'ladi. Ichimlik yoki bubo kerak bo'lishi mumkin. ko'proq vipadkiv istayman, men pracyuvatime deb o'ylayman. Va keyin sizda to'g'ri nuqta bor;)
O'ylaymanki, siz bu statistikani cicave va coryne'dan o'rgandingiz;) O'qing, tajriba qiling, baham ko'ring.
Muvaffaqiyat!

Vlad Merzhevich

Nima bo'lishidan qat'iy nazar, katta diagonallarning kuzatuvchilari tobora ko'proq kirish imkoniyatiga ega bo'lib, bugungi kunda bino doimiy ravishda o'sib bormoqda, ba'zida boy matnni joylashtirish uchun o'simlikni chekka maydonda vinicating. Masalan, sizga kerak bo'lishi mumkin mobil versiyasi sayt yoki qatorlar soni muhim bo'lgan interfeys uchun. Shu kabi turlarda siz kesish tuyg'usiga ega bo'lishingiz mumkin uzoq muddatli qatorlar matn, zalishivshi lishivshi cob rechennya. Shunday qilib, biz interfeysni ixcham ko'rinishga keltiramiz va ko'rsatilgan ma'lumotlarni tezda qamrab olamiz. Xuddi shu PHP yordamida siz serverning o'zi uchun ishlashingiz mumkin, ammo CSS orqali bu osonroq, siz hali ham matnni bir butun sifatida ko'rsatishingiz mumkin, masalan, kursorni yangi sichqoncha kursori ustiga olib borganingizda. Keling, usulni ko'rib chiqaylik, matnni aniq qaychi bilan qanday kesish kerak.

Aslida, hamma narsa yashirin qiymatlar bilan to'lib-toshish darajasiga tushiriladi. Vídmínností Lich kryutsya vyzny vydobrazhenny bizning matn.

G'alaba to'lib-toshgan

To'lib-toshish kuchi matn bilan o'zini butun go'zalligi bilan namoyon etishi uchun oq bo'shliq yordamida matnni nowrap ma'nolariga o'tkazish kerak. Agar biz ishlamasak, unda biz kerakli ta'sirga ega bo'lmaymiz, uzatish matnga qo'shiladi va sharoblar yana ko'rsatiladi. 1-ilovada berilgan matnni uslublar va vakolatlar to'plami bilan qanday shakllantirish ko'rsatilgan.

Butt 1. matn uchun overflow

HTML5 CSS3 IE Cr Op Sa Fx

Ushbu dumbaning natijasi rasmda ko'rsatilgan. bitta.

Guruch. 1. Toshib ketgandan keyin matn turi

Ko'rib turganingizdek, bu kichik, umuman katta emas - matnni davom ettirish mumkinligi aniq emas, shuning uchun Koristuvachevning tushunchasi haqida gapirish kerak. Kim uchun, gradient yoki dog'ni ovoz.

Matnga gradient qo'shing

O'ng tarafdagi matn tugamasligi aniq bo'lishi uchun uning ustiga aniq rangdan fon rangigacha gradient qo'llanilishi mumkin (2-rasm). Buni amalga oshirishda matnni bosqichma-bosqich farqlash effekti mavjud.

Guruch. 2. Gradientli matn

2-ilovada ushbu effektning yaratilishi ko'rsatilgan. Elementning o'zi uslubini yolg'iz qoldirish amaliy, gradientning o'zi esa :: after va CSS3 psevdoelementlariga yordam berish uchun qo'shiladi. Buning uchun biz bo'sh psevdoelementni tarkib kuchi orqali kiritamiz va yangisi asosiy brauzerlar uchun turli xil prefikslar bilan gradientni to'xtatmaguncha (2-misol). Gradientning kengligi kenglik orqali osongina o'zgartirilishi mumkin.Shuningdek, siz shaffoflik bosqichlarini 0,2 qiymatini o'zingizga o'zgartirish orqali sozlashingiz mumkin.

2-misol. Matn ustidagi gradient

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Diskret ichidagi arpedjio polar ketma-ketlikni, zanjirni va bir bosqichli vertikalni ortiqcha ovozli polifonik matoda o'zgartiradi.

Bu usul ishlamaydi Internet-brauzer Explorer 8.0 inklyuziv versiyasigacha, buning uchun hech qanday gradient yo'q. Ammo siz PNG-24 formatidagi rasm orqali CSS3-ni ko'rishingiz va gradientni eski usulda ishlashingiz mumkin.

Ushbu usul faqat monoxromatik fon bilan qo'llaniladi va ayni paytda fon tasviri matn ustidagi gradientga ega.

Bagatokrapka qisqa matnda

Kesilgan matn oxiridagi gradientni almashtirish ham dog' bilan belgilanishi mumkin. Bundan tashqari, matnni to'ldirishning qo'shimcha kuchi uchun u avtomatik ravishda qo'shilishi kerak. Bu barcha brauzerlar, shu jumladan IE ning eski versiyalari tomonidan tushuniladi va bitta vakolatning etishmasligi bilan uning holati hali ham noaniq. CSS3 kirish huquqiga ega bo'lishi kerak, ammo undagi kod tekshiruvdan o'tmaydi.

3-bo'g'imda, nuqta qo'shish kabi ellips qiymatlari bilan matn to'lib toshgan quvvat mavjud. Sichqonchani matn ustiga olib borganingizda, vinolar xuddi shu tarzda ko'rsatiladi va fon rangi bilan yoritiladi.

Misol 3. G'alaba matni to'lib-toshgan

HTML5 CSS3 IE Cr Op Sa Fx

Noma'lum kontrast, boy tajribalarda ko'rinib turganidek, Li Ross tomonidan atributning asosiy kechirimi sifatida belgilangan.

Ushbu dumbaning natijasi rasmda ko'rsatilgan. 3.

Guruch. 3. Uchta qoralangan matn

Ushbu usullarning katta afzalligi shundaki, matn qisqa bo'lganligi sababli gradient va dog'lar ko'rinmaydi va to'liq berilgan maydonga joylashtirilgan. Bundan tashqari, matn odatdagidek ko'rsatiladi, agar butun chiziq ekranda ko'rinadigan bo'lsa va elementning kengligi o'zgartirilganda ko'rsatiladi.

bir soat masxara dovgí nomi o'rtoqlar xabar kabi, - uch qator, - boshqa bloklari boshqa sarlavhalar soni. Bu ajoyib bo'lardi, yakby o'ng tomonga bulo bo'lishi mumkin, go'yo yumshatish uchun, uni yanada ixcham qilish uchun. Va ayiq bilan kursorni ko'rsatganda, sarlavhani yana ko'rsating.

Kimga yordam kerak bo'lsa, bizning sevimli CSS-ga keling. Hammasi oddiy, hayratlanarli.

Masalan, bizda tovarlar katalogi bo'lgan bunday blok mavjud:

Eksa yoga tuzilishi:

Mo''jiza Yudo silovidavets vechirníy, ta'mnichy, san'at. 20255-59

Ajoyib tovarlar super narxga, atigi 100 rublga. O'zingizning xudbinlik oqshomlaringizni yoritib, hayotga kuch bag'ishlang!

Axis yoga uslublari:

Someblock( chegara: 1px qattiq #cccccc; hoshiya: 15px avtomatik; toʻldirish: 10px; kenglik: 250px; ) .header (chegara-pastki: 1px tire; shrift oʻlchami: 16px; shrift-weight: qalin; chekka-pastki: ; )

Bir daqiqa kutib turing, ochko'z ko'ring. Xo'sh, men tezda mahsulotni nomlashim mumkin. Ammo shunday yuzlab va minglab odamlar kabi ishlash haqida nima deyish mumkin? Bundan tashqari, ko'plab belgilar sifatida obez bo'lib, nomning bir qismini kesish uchun PHP dan foydalanishingiz mumkin. Ammo ish haqida nima deyish mumkin, shunda tartib keyinroq o'zgaradi va bloklar kichikroq yoki bir vaqtning o'zida 2-3 barobar katta bo'ladi? Hamma narsa variant emas, hamma narsa mos emas.

Va bu erda biz yoga jozibasi kuchiga ega CSS yordamiga kelamiz matn to'lib ketishi. Ale yoga boshqa organlar bilan dekilkomdan birdaniga to'g'ri g'alaba qozonish kerak. Quyida men sizga tayyor echimni ko'rsataman, shundan so'ng nima qilishni tushuntiraman.

Keyinchalik, tovarlarning nomlarini qo'lda tahrir qilib, uslublarni dasturiy ravishda kesib, biz oldik css qo'llari va bizda nimani ko'rayotganimizga hayron bo'ling:

Mo''jiza Yudo silovidavets vechirníy, ta'mnichy, san'at. 20255-59

Ajoyib tovarlar super narxga, atigi 100 rublga. O'zingizning xudbinlik oqshomlaringizni yoritib, hayotga kuch bag'ishlang!

Xo'sh, yak, qisqaroqmi? Yaxshiyamki! Va ayiqni o'z nomiga keltiring ... voila! O'q biz uchun u erda.

Tuzilishda hech narsa o'zgarmadi, men faqat sinf qo'shdim .sarlavha sarlavha yorlig'i. Va eksa yangi, qo'shimcha uslublar:

Someblock(chegara: 1px qattiq #cccccc; hoshiya: 15px avtomatik; toʻldirish: 10px; kenglik: 250px; ) .header (chegara-pastki: 1px chiziqli; shrift oʻlchami: 16px; shrift-ogʻirligi: qalin; chekka-pastki: toʻlib-toshgan : yashirin; matnni to'ldirish: ellips; bo'sh joy: nowrap;

Biz nima o'ldirganimizga hayron bo'ling:

• Biz blokga kuch berdik oq bo'shliq: nowrap, scho pribiraê matndan slív ni yangi qatorga o'tkazish imkoniyati, bir qatordagi bir xil token yogo bilan;
• Keyin bizga kuch berildi toshib ketish: yashirin blokning kengligi bilan bizning qatorimizning ko'rinishini o'rab olgan, hamma narsani o'z-o'zidan shakllantirgan va uni ko'rsatmagan;
• Masalan, biz qo'shimcha quvvat olish uchun qatorimizga uchta dog' qo'shdik matnni to'ldirish: ellips, xuddi shu nuqtai nazardan, sizga tushuncha berib, bu qatorning oxiri emasligi va bu kerak, ehtimol, ayiqni olib kelish va yana hayratga tushish.

CSS-ni yaxshi ko'ring, CSS-ni o'rganing va siz bunday katlanadigan ibora bilan veb-sayt qura olmaysiz =)