Ba'zida mahsulot havolalarining uzun nomlari - har biri uchta qatordan iborat - yoki boshqa bloklarning uzun sarlavhalari qanchalik zerikarli. Agar bularning barchasi qandaydir tarzda qisqartirilsa, ixchamroq bo'lsa, qanchalik yaxshi bo'lardi. Va sichqonchani uning ustiga olib borganingizda, sarlavhani to'liq ko'rsating.

Buning uchun bizning sevimli CSS yordamimizga keladi. Bu juda oddiy, qarang.

Aytaylik, mahsulot katalogidan bizda shunday blok bor:

Mana uning tuzilishi:

Mana uning uslublari:

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: 12px ;)

Qabul qilaman, bu dahshatli ko'rinadi. Albatta, siz mahsulot nomini qisqartirishingiz mumkin. Ammo ular yuzlab yoki minglab bo'lsa-chi? Shuningdek, siz PHP dan ismning bir qismini kesish uchun ham foydalanishingiz mumkin, uni ma'lum miqdordagi belgilar bilan cheklashingiz mumkin. Ammo keyinroq tartib o'zgarsa va bloklar kichikroq yoki aksincha, 2-3 barobar katta bo'lsa-chi? Bularning hech biri variant emas, bularning hech biri bizga mos kelmaydi.

Va bu erda CSS va uning sehrli xususiyati bizga yordamga keladi matn to'lib ketishi. Ammo uni bir qancha boshqa xususiyatlar bilan birgalikda to'g'ri ishlatish kerak. Quyida men sizga tayyor yechimni ko'rsataman, shundan so'ng nima ekanligini tushuntiraman.

Shunday qilib, mahsulot nomlarini qo'lda tahrirlash va uslublarni dasturiy kesishni chetga surib, biz CSS-ni qo'limizga olamiz va nimaga erishganimizni ko'ramiz:

Mo''jiza Yudo kechki kuch beruvchi, sirli, san'at. 20255-59

Ajoyib mahsulot super narxda, atigi 100 rubl. Bu sizning yolg'iz oqshomlaringizni yoritadi va sizga hayotiylik baxsh etadi!

Xo'sh, yaxshiroqmi? Menimcha, juda ham shunday! Va sichqonchani sarlavha ustiga olib boring... voila! Bu erda bizga to'liq ko'rsatilgan.

Bizning strukturamizda hech narsa o'zgarmadi, men shunchaki sinfga ega diva qo'shdim .sarlavha sarlavha yorlig'i. Va bu erda yangi, yangilangan 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: 12px ; to'lib ketish: yashirin; matn to'lib ketishi: ellips; bo'sh joy: nowrap; )

Qarang, biz nima qildik:

• Biz blokga xususiyat qo'shdik oq bo'shliq: nowrap, bu matnning so'zlarni o'rash qobiliyatini olib tashlaydi yangi qator, shu bilan uni chiziqqa torting;
• Keyin mulkni qo'shdik toshib ketish: yashirin, bu bizning chiziqning ko'rinishini blokning kengligi bilan cheklab qo'ydi va shu bilan barcha keraksizlarni kesib tashladi va uni tashrif buyuruvchiga ko'rsatmaydi;
• Xo'sh, oxirida biz mulkdan foydalangan holda qatorimizga ellips qo'shdik matnni to'ldirish: ellips, shu bilan tashrif buyuruvchiga bu chiziqning oxiri emasligini va ehtimol ular sichqonchani ko'tarib, unga to'liq qarashlari kerakligini tushunishlariga imkon beradi.

CSS-ni yaxshi ko'ring, CSS-ni o'rganing va veb-sayt yaratish sizga unchalik qiyin ko'rinmaydi =)

Ko'p odamlar, ehtimol, bir qatorda matnni ko'rsatish kerak bo'lganda muammoga duch kelishgan. Bundan tashqari, matn juda uzun bo'lishi mumkin va bu matn joylashgan blokning kengligi odatda brauzer oynasining kamida bir xil o'lchami bilan cheklangan. Bunday holatlar uchun CSS3 tavsiyasiga kiritilgan matnni to'ldirish xususiyati ixtiro qilingan va birinchi marta IE6 da juda uzoq vaqt oldin amalga oshirilgan. Ushbu xususiyatdan blok uchun foydalanilganda, agar uning matni blokning o'zidan kengroq bo'lsa, u holda matn kesiladi va oxirida ellips qo'yiladi. Bu erda hamma narsa unchalik oddiy bo'lmasa-da, biz biroz keyinroq qaytamiz.
Internet Explorer bilan hamma narsa tushunarli, boshqa brauzerlar haqida nima deyish mumkin? Va matnni to'ldirish xususiyati hozirda CSS3 spetsifikatsiyasidan chiqarib tashlangan bo'lsa-da, Safari uni qo'llab-quvvatlaydi (ko'ra kamida, 3-versiyada), Opera ham (9-versiyadan beri, garchi xususiyat -o-overflow-text deb ataladi). Lekin Firefox buni qilmaydi, qo'llab-quvvatlamaydi va hatto 3-versiyada ham qo'llanilmaydi. Qayg'uli, lekin haqiqiy. Lekin, ehtimol, biror narsa qilish mumkinmi?

Albatta, buni amalga oshirish mumkin. Internetda ushbu mulk va Firefox-da buni qanday qilish haqida qidirganimda, men duch keldim oddiy yechim. Yechimning mohiyati:

Ana xolos. Tafsilotlar uchun maqolani o'qing.
Yechim yomon emas, lekin muammolar mavjud:

1. Matn xatning o'rtasida (nisbatan aytganda) kesilgan bo'lishi mumkin va biz uning "cho'g'ini" ko'ramiz.
2. Matn blokning kengligidan kichikroq bo'lsa ham, ellips har doim ko'rsatiladi (ya'ni, u undan tushmaydi va ellips kerak emas).

Birinchi qadam

Keling, birinchi navbatda ikkinchi muammoga e'tibor qarataylik, ya'ni kerak bo'lmaganda ellipsni ko'rsatishdan qanday qochish kerak. Miyani sindirib, "bir oz" tajriba o'tkazganimdan so'ng, men yechim topdim. Men tushuntirishga harakat qilaman.
Gap shundaki, bizga ellipsli alohida blok kerak, u faqat matn kengligida juda ko'p joy egallaganida paydo bo'ladi. Keyin men tushib qolgan suzuvchi blok g'oyasiga keldim. Garchi bu qo'rqinchli bo'lsa-da, bu faqat har doim mavjud bo'lgan va o'ngga bosilgan blokni bildiradi, lekin matnning kengligi katta bo'lganda, matn blokni keyingi qatorga suradi.
Keling, amaliyotga o'tamiz, aks holda tushuntirish qiyin. Keling, belgilaymiz HTML tuzilishi:

juda uzun matn

Juda ixcham emas, lekin men kichikroq narsani qila olmadim. Shunday qilib, bizda DIV.ellipsis konteyner bloki, matnimiz bo'lgan blok va ellipsni o'z ichiga olgan boshqa blok mavjud. E'tibor bering, "ellips bloki" aslida bo'sh, chunki matnni nusxalashda bizga qo'shimcha uchta nuqta kerak emas. Bundan tashqari, qo'shimcha sinflar yo'qligidan xavotirlanmang, chunki bu tuzilma CSS selektorlari yordamida yaxshi yo'naltirilgan. Va bu erda 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 (suzuvchi: o'ngda; chetidan tepada: -1,2em; ).ellips >

Ana xolos. Biz tekshiramiz va uning Firefox, Opera, Safari-da mo'ljallanganidek ishlashiga ishonch hosil qilamiz. IEda juda g'alati, ammo bashorat qilinadigan natija mavjud. IE6-da hamma narsa yo'qoldi, lekin IE7-da u oddiygina ishlamaydi, chunki u yaratilgan tarkibni qo'llab-quvvatlamaydi. Ammo keyinroq IE ga qaytamiz.

Hozircha, nima qilganimizni ko'rib chiqaylik. Birinchidan, biz asosiy blokning satr balandligi va balandligini o'rnatamiz, chunki biz blokning balandligi va matn chizig'ining balandligini bilishimiz kerak. Biz bir xil qiymatni blokning yuqori qismi uchun ellips bilan o'rnatdik, ammo manfiy qiymat bilan. Shunday qilib, blok keyingi qatorga "qayta o'rnatilmagan" bo'lsa, u matn chizig'idan yuqorida bo'ladi (bir qator), qayta o'rnatilganda u o'z darajasida bo'ladi (aslida, u pastroq, biz uni tortib olamiz. bitta qator). Keraksiz narsalarni yashirish uchun, ayniqsa, ellipsni ko'rsatishning hojati bo'lmaganda, biz to'ldirishni qilamiz: asosiy blok uchun yashirin, shuning uchun ellips chiziqdan yuqorida bo'lganda, u ko'rsatilmaydi. Bu shuningdek, blokdan tashqarida (o'ng chetiga) tushadigan matnni olib tashlashga imkon beradi. Matnni kutilmaganda o'rash va blokni ellips bilan pastga va pastga surishning oldini olish uchun biz oq bo'shliq qilamiz: nowrap, shu bilan defislarni taqiqlaymiz - bizning matnimiz har doim bir qatorda bo'ladi. Matnli blok uchun biz float: chapni o'rnatamiz, shunda u darhol blokni ellips bilan yiqilmaydi va minimal kenglikni egallaydi. Asosiy blok (DIV.ellipsis) ichida ikkala blok ham suzib yurganligi sababli (float: chap/o'ng), matn bloki bo'sh bo'lganda asosiy blok qulab tushadi, shuning uchun asosiy blok uchun biz qattiq balandlikni o'rnatamiz (balandlik: 1,2em) . Va nihoyat, biz ellipsni ko'rsatish uchun ::after pseudo-elementdan foydalanamiz. Ushbu psevdoelement uchun biz uning ostida paydo bo'ladigan matnni qoplash uchun fonni ham o'rnatamiz. Biz blokning o'lchamlarini ko'rish uchun asosiy blok uchun ramka o'rnatdik, keyinroq uni olib tashlaymiz.
Agar Firefox psevdo-elementlarni, shuningdek, Opera va Safari-ni joylashuvi nuqtai nazaridan qo'llab-quvvatlasa (ular uchun joylashishni aniqlash/float va h.k.), u holda ellipslar uchun alohida blokdan foydalanmaslik mumkin edi. Oxirgi 3 ta qoidani quyidagi bilan almashtirib koʻring:

.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 qo'shimcha ellips blokisiz. Ammo Firefox hafsalasi pir bo'ldi. Lekin u uchun biz qaror qabul qilamiz. Xo'sh, siz asl HTML tuzilishi bilan shug'ullanishingiz kerak bo'ladi.

Ikkinchi qadam

Siz sezgan bo'lsangiz kerak, biz matn blokga sig'ganda ellipslar paydo bo'lishi muammosidan xalos bo'ldik. Biroq, bizda yana bir muammo bor - matn harflar o'rtasidan kesilgan. Bundan tashqari, u IEda ishlamaydi. Ikkalasini ham engib o'tish uchun brauzerlar uchun mahalliy matn to'ldirish qoidasidan foydalanishingiz kerak va faqat Firefox uchun yuqorida tavsiflangan yechimdan foydalaning (muqobil yo'q). Biz “faqat Firefox uchun” yechimni qanday qilishni keyinroq tushunamiz, ammo endi bizda mavjud bo'lgan narsalarni matn to'lib-toshgan holda ishlashga harakat qilaylik. Keling, CSS-ni o'zgartiramiz:

.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, tahrir qilish uchun ko'p narsa yo'q. Asosiy blok uslubiga uchta qator qo'shildi. Ulardan ikkitasi matnni to'ldirishni o'z ichiga oladi. Mashq qilish kenglik kengligi: IE uchun 100% kerak, shunda matn blokni cheksizgacha kengaytirmaydi va matnni to'ldirish xususiyati ishlaydi; asosan biz kenglikni cheklab qo'ydik. Nazariy jihatdan, DIV, barcha blok elementlari kabi, konteynerning butun kengligi va kengligi bo'ylab cho'ziladi: 100% foydasiz va hatto zararli, ammo IEda tartib bilan bog'liq muammo bor, chunki konteyner har doim tarkibga mos keladigan tarzda cho'ziladi, shuning uchun boshqa yo'l yo'q. Shuningdek, biz barcha ichki elementlarni inline qilib qo'ydik, chunki ba'zi brauzerlar (Safari va Opera) uchun matn to'lib-toshgan holda ishlamaydi, chunki ichida blok elementlari mavjud. Biz oxirgi uchta qoidani izohladik, chunki bu holda ular kerak emas va hamma narsani buzadi (mojaro). Ushbu qoidalar faqat Firefox uchun kerak bo'ladi.
Keling, nima borligini ko'rib chiqaylik va davom etaylik.

Uchinchi qadam

Men boshida aytib o'tilgan sahifani (ushbu maqolani yozishdan oldin) yana bir bor ko'rib chiqqanimda, qiziqib, aqlli bog'liq g'oyalar uchun sharhlarni ko'rib chiqdim. Va men buni Firefox va IE-da ishlaydigan boshqa yechim haqida gapiradigan sharhda topdim (bu odam uchun, birinchi maqola muallifiga kelsak, boshqa brauzerlar yo'q). Shunday qilib, ushbu yechimda muallif ushbu hodisani (matnning to'lib ketishining yo'qligi) biroz boshqacha tarzda ko'rib chiqadi, agar kerak bo'lsa, ellips qo'yish kerak bo'lgan elementlarga to'lib ketish va quyilish hodisalariga ishlov beruvchilarni biriktiradi. Yomon emas, lekin menimcha, bu yechim juda qimmat (resurslar nuqtai nazaridan), ayniqsa, u biroz noaniq bo'lgani uchun. Biroq, u qanday qilib bunga erishganini tushunayotib, u qiziq bir narsaga duch keldi, ya'ni CSS xususiyatlari o -moz-bog'lash. Men tushunganimdek, bu IEdagi xatti-harakatlarning analogidir, faqat boshqa sous va sovutgich bilan. Ammo biz tafsilotlarga kirmaymiz, aytaylik, shu tarzda siz JavaScript ishlov beruvchisini elementga biriktirishingiz mumkin. CSS yordamida. Bu g'alati tuyuladi, lekin u ishlaydi. Biz nima qilyapmiz:

.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; yuqori cheti: -1,2em; displey: blok; } .moz-ellipsis > DIV + DIV :: keyin(fon rangi: oq; kontent: "..."; )

Ko'rib turganingizdek, biz yana ko'p o'zgarishlar qilmadik. IE7-ning ushbu bosqichida g'alati nosozlik mavjud, agar siz masshtabni o'rnatmasangiz, hamma narsa buziladi: asosiy blok uchun 1 (eng oddiy variant). Agar siz .ellipsis * yoki .moz-ellipsis > DIV + DIV (bu IE7 ga umuman ta'sir qilmaydi) qoidasini olib tashlasangiz (o'chirib tashlasangiz, izoh bersangiz), unda nosozlik yo'qoladi. Bularning hammasi g'alati, agar kimdir nima bo'lganini bilsa, menga xabar bering. Hozircha biz masshtabni bajaramiz: 1 va Firefox-ga o'tamiz.
-moz-binding xususiyati identifikator ellipsisi bilan ko'rsatma bilan moz_fix.xml faylini o'z ichiga oladi. Buning mazmuni xml fayli quyidagi:

Bu konstruktorning barchasi selektor ishlagan elementga moz-ellipsis sinfini qo'shishdir. Bu faqat Firefox-da ishlaydi (gecko brauzerlari?), shuning uchun faqat unda moz-ellipsis klassi elementlarga qo'shiladi va biz qo'shishimiz mumkin. qo'shimcha qoidalar. Ular shuni xohlashdi. Men this.style.mozBinding = “” zarurligiga to‘liq ishonchim komil emas, lekin ifodalash tajribasiga ko‘ra, xavfsiz tomonda bo‘lgan ma’qul (umuman, men Firefox-ning bu tomoni bilan unchalik tanish emasman, shuning uchun Men xato qilgan bo'lishim mumkin).
Bu texnika tashqi fayl va umuman JavaScript dan foydalanayotganidan xavotirga tushishingiz mumkin. Qo'rqishga hojat yo'q. Birinchidan, agar fayl yuklanmasa va/yoki JavaScript o'chirilgan bo'lsa va ishlamasa, yaxshi, foydalanuvchi oxirida ellipsni ko'rmaydi, matn blok oxirida kesiladi. Ya'ni, bu holda biz "ko'zga tashlanmaydigan" yechimni olamiz. O'zingiz ko'rishingiz mumkin.

Shunday qilib, biz "Katta to'rtlik" brauzerlari uchun uslubga ega bo'ldik, u Opera, Safari va IE uchun matn to'ldirishni amalga oshiradi va uni Firefox uchun taqlid qiladi, unchalik yaxshi emas, lekin bu hech narsadan yaxshiroqdir.

To'rtinchi qadam

Biz bu nuqtaga chek qo'yishimiz mumkin edi, lekin biz yechimimizni biroz yaxshilashni xohlaymiz. Biz konstruktorni istalgan blokga ulashimiz va shunga mos ravishda uning ustidan nazoratni qo'lga kiritishimiz mumkin bo'lganligi sababli, nega bundan foydalanmasligimiz kerak. Keling, tuzilmamizni soddalashtiraylik:

juda uzun matn

Albatta! O'ylaymanki, siz men bilan rozi bo'lasiz - bu sizga kerak!
Endi uslubdan barcha keraksiz narsalarni olib tashlaymiz:

.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: "..."; )

Biz nihoyat qizil chegarani olib tashladik :)
Keling, moz_fix.xml ga ozgina qo'shamiz:

Bu yerda nima bo'lyapti? Biz dastlabki HTML tuzilmamizni qayta yaratmoqdamiz. Ya'ni, bloklar bilan bog'liq qiyinchiliklar avtomatik ravishda amalga oshiriladi va faqat Firefox-da. JavaScript kodi eng yaxshi an'analarda yozilgan :)
Afsuski, maktubning o'rtasidan matn kesib tashlangan vaziyatdan qochib qutula olmaymiz (garchi, ehtimol, vaqtinchalik, chunki mening yechimim hali ham juda qo'pol va kelajakda ishlashi mumkin). Ammo biz bu ta'sirni biroz yumshata olamiz. Buning uchun bizga rasm (shaffof gradientli oq fon) va uslubga bir nechta o'zgarishlar kerak bo'ladi:

.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; }

Keling, ko'raylik va hayotdan zavqlanamiz.

Keling, bunga chek qo'yaylik.

Xulosa

Men sizga uchinchi tomon tartibi uchun kichik bir misol keltiraman. Men Vikipediya sahifalaridan birining mazmunini oldim (birinchi paydo bo'lgan) va unga yuqorida tavsiflangan usulni qo'lladim.
Umuman bu qaror faqat cho'zilgan holda universal deb atash mumkin. Bularning barchasi sizning dizayningiz va uning murakkabligiga bog'liq. Sizga fayl kerak bo'lishi mumkin yoki daf bo'lishi mumkin. Garchi ko'p hollarda, menimcha, u ishlaydi. Va keyin, endi sizda boshlang'ich nuqta bor;)
Umid qilamanki, siz maqoladan qiziqarli va foydali narsalarni o'rgandingiz;) O'rganing, tajriba qiling, baham ko'ring.
Omad!

Ruxsat etilgan balandlik va kenglikdagi blok ichida ko'rsatilishi kerak bo'lgan ixtiyoriy uzunlikdagi matn mavjud. Bunday holda, agar matn to'liq mos kelmasa, berilgan blokga to'liq mos keladigan matnning bir qismi ko'rsatilishi kerak, shundan so'ng ellips o'rnatiladi.

Bu vazifa juda keng tarqalgan, lekin ayni paytda u ko'rinadigan darajada ahamiyatsiz emas.

CSS-da bitta qatorli matn uchun imkoniyat

Bunday holda siz text-overflow: ellipsis xususiyatidan foydalanishingiz mumkin. Bunday holda, konteyner mulkka ega bo'lishi kerak toshib ketish teng yashirin yoki klip

Blok (kenglik: 250px; boʻsh joy: nowrap; toʻldirish: yashirin; matn toʻldirish: ellipsis;)

CSS-da ko'p qatorli matn uchun imkoniyat

Ko'p qatorli matnni kesishning birinchi usuli - bu CSS yordamida xususiyatlari psevdo-elementlarni qo'llaydi : oldin Va :keyin. Keling, HTML belgilashni boshlaylik

Va endi mulklarning o'zi

Box (to‘ldirilishi : yashirin ; balandlik : 200px ; en : 300px ; chiziq balandligi : 25px ; ) .box :oldin (kontent : "" ; float : chap ; kenglik : 5px ; balandlik : 200px ; ) .box > * :st -child ( float : o'ng ; en : 100% ; chet-chap : -5px ; ) .box :after (kontent : "\02026" ; box-sizing : content-box ; float : o'ng ; pozitsiya : nisbiy ; tepa : -25px; chap: 100%; kenglik: 3em; chekka-chap: -3em; toʻldirish-oʻng: 5px; matnni tekislash: oʻng; fon oʻlchami: 100% 100%; fon: chiziqli gradient (oʻngga, rgba (255 , 255 , 255 , 0 ), oq 50% , oq ); )

Boshqa usul - ustun kengligi xususiyatidan foydalanish, uning yordamida biz ko'p qatorli matn uchun ustun kengligini o'rnatamiz. Biroq, bu usuldan foydalanganda, oxirida ellipsni o'rnatish mumkin bo'lmaydi. HTML:

Blok (toshib : yashirin ; balandlik : 200px ; kenglik : 300px ; ) .block__inner ( -webkit-ustun kengligi : 150px ; -moz-ustun kengligi : 150px ; ustun kengligi : 150px ; balandlik :1)0

Brauzerlar uchun CSS yordamida ko'p qatorli matnni hal qilishning uchinchi usuli mavjud Webkit. Unda biz prefiks bilan bir nechta o'ziga xos xususiyatlardan foydalanishimiz kerak bo'ladi -veb-kit. Asosiysi -webkit-line-clamp bo'lib, u blokda chiqariladigan qatorlar sonini belgilash imkonini beradi. Yechim chiroyli, ammo cheklangan brauzerlar guruhida ishlashi tufayli cheklangan

Bloklash (to‘ldirilishi : yashirin ; matnni to‘ldirish : ellipsis ; displey : -webkit-box ; -webkit-line-clamp : 2 ; -webkit-box-orient : vertikal; )

JavaScript-da ko'p qatorli matn uchun imkoniyat

Bu erda qo'shimcha ko'rinmas blokdan foydalaniladi, unda bizning matnimiz dastlab joylashtiriladi, shundan so'ng u ushbu blokning balandligi balandlikdan kam yoki teng bo'lguncha bir vaqtning o'zida bir belgi o'chiriladi. kerakli blok. Va oxirida matn asl blokga o'tkaziladi.

var blok = hujjat. querySelector(".blok"), matn = blok. innerHTML, klon = hujjat. createElement("div"); klonlash uslub. pozitsiya = "mutlaq"; klonlash uslub. visibility = "yashirin" ; klonlash uslub. kengligi = blok. clientWidth + "px" ; klonlash innerHTML = matn; hujjat. tanasi. appendChild(klon); var l = matn. uzunligi - 1; uchun (; l >= 0 && klon. clientHeight > blok. clientHeight; -- l) (klon. innerHTML = matn. substring (0, l) + "...";) blok. innerHTML = klonlash. innerHTML;

Bu jQuery uchun plagin bilan bir xil:

(funktsiya ($ ) ( var truncate = funktsiya (el ) ( var matn = el . matn (), balandlik = el . balandlik (), klon = el . klon (); klon . css (( pozitsiya : "mutlaq" , ko'rinish : "yashirin" , balandlik : "avtomatik" )); el. keyin (klon); var l = matn. uzunlik - 1 ; uchun (; l >= 0 && klon. balandlik () > balandlik ; -- l ) ( klonlash . matn ( matn . pastki qator ( 0 , l ) + "..." ); ) el. matn ( klon . matn ()); klonlash. olib tashlash (); ); $ . fn . truncateText = funktsiya () ( buni qaytaring. har bir (funksiya () ( kesish ($ (bu )); )); ); ) (jQuery ));

Agar butun matn belgilangan maydonga to'g'ri kelmasa, blokdagi matnning ko'rinish parametrlarini belgilaydi. Ikkita variant bor: matn kesilgan; matn kesiladi va satr oxiriga ellips qo'shiladi. text-overflow, agar blokning to'lib-toshish xususiyati avtomatik , aylantirish yoki yashirin ga o'rnatilgan bo'lsa ishlaydi.

qisqacha ma'lumot

Belgilar

	Tavsif	Misol
<тип>	Qiymat turini ko'rsatadi.	<размер>
A & B	Qiymatlar belgilangan tartibda chiqarilishi kerak.	<размер> && <цвет>
A | B	Taklif etilganlardan (A yoki B) faqat bitta qiymatni tanlashingiz kerakligini bildiradi.	normal | kichik qalpoqchalar
A || B	Har bir qiymat mustaqil ravishda yoki istalgan tartibda boshqalar bilan birgalikda ishlatilishi mumkin.	kengligi || hisoblash
	Guruh qiymatlari.	[ kesish || kesib o'tish ]
*	Nol yoki undan ko'p marta takrorlang.	[,<время>]*
+	Bir yoki bir necha marta takrorlang.	<число>+
?	Belgilangan tur, so'z yoki guruh ixtiyoriy.	kiritilganmi?
(A, B)	Kamida A takrorlang, lekin B martadan ko'p emas.	<радиус>{1,4}
#	Vergul bilan ajratilgan bir yoki bir necha marta takrorlang.	<время>#

×

Qiymatlar

clip Matn hududga mos keladigan tarzda qirqilgan. ellipsis Matn qisqartiriladi va satr oxiriga ellips qo'shiladi.

Misol

Magnit maydon osmon sferasining katta doirasini arzimas darajada susaytiradi, bu holda orbitalarning ekssentrikliklari va moyilliklari ortadi.

Natija bu misol shaklda ko'rsatilgan. 1.

Guruch. 1. Matn oxiridagi ellips

Ob'ekt modeli

Ob'ekt.style.textOverflow

Eslatma

11-versiyadan oldingi Opera -o-text-overflow xususiyatidan foydalanadi.

Spetsifikatsiya

Har bir spetsifikatsiya tasdiqlashning bir necha bosqichlaridan o'tadi.

• Tavsiya - Spetsifikatsiya W3C tomonidan tasdiqlangan va standart sifatida tavsiya etiladi.
• Nomzod tavsiyasi ( Mumkin bo'lgan tavsiya) - standart uchun mas'ul bo'lgan guruh o'z maqsadlariga javob berishidan qoniqish hosil qiladi, lekin standartni amalga oshirish uchun ishlab chiqish hamjamiyatidan yordam talab qiladi.
• Taklif etilayotgan tavsiya Tavsiya etilgan tavsiya) - bu bosqichda hujjat yakuniy tasdiqlash uchun W3C maslahat kengashiga taqdim etiladi.
• Ishchi loyiha - jamoatchilik muhokamasi uchun muhokama qilingan va o'zgartirishlar kiritilgan loyihaning yanada etuk versiyasi.
• Tahririyat loyihasi ( Tahririyat loyihasi) - loyiha muharrirlari tomonidan kiritilgan o'zgartirishlardan so'ng standartning qoralama versiyasi.
• qoralama ( Spetsifikatsiya loyihasi) - standartning birinchi qoralama versiyasi.

×