Oxirida Css nuqta.

topshirish

Golovna

Qanday qilib jo'natilgan tovarlarning oldingi nomlari - uchta qatorda - va boshqa bloklarning boshqa sarlavhalari.

Go'yo mo''jiza bo'lsa, o'ngdagi hamma narsani tekislash va uni yanada ixcham qilish mumkin edi.

Hammasi juda oddiy, hayratlanarli.

Aytaylik, bizda mahsulotlar katalogiga ega quyidagi blok mavjud:

Yogo o'qi tuzilishi:

Mo''jiza-yudo kuch-qudrat shohidi oqshom, rom, san'at. 20255-59 Ajoyib mahsulot super narxda, atigi 100 rubl.

Kechqurunlaringizni yoritib, hayotiylik baxsh eting! Eksa 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: ; )

Va sichqonchani uning ustiga olib borganingizda, sarlavha tashqi tomondan ko'rsatiladi.

Buning uchun CSS-ga bo'lgan sevgimiz bizga yordam berishi mumkin.

Bir daqiqa kutib turing, u ochko'z ko'rinadi.

Albatta, siz mahsulot nomini qisqartirishingiz mumkin. Ularning yuzlab yoki minglablari bor ekan, nima uchun ishlash kerak? Bundan tashqari, PHP usullaridan ismning bir qator belgilar bilan o'ralgan qismini kesish uchun ham foydalanishingiz mumkin.

Agar tartib va ​​bloklar kichikroq yoki ehtimol 2-3 baravar kattaroq bo'lsa, yana nima qilish kerak?

Bu variant emas, bu variant emas.

• Va bu erda CSS va uning sehrli kuchi bizga yordamga keladi matn to'lib ketishi.
• Ale yogo bir vaqtning o'zida bir nechta boshqa hokimiyatlardan to'g'ri g'alaba qozonishi kerak. Quyida men sizga tayyor yechimni ko'rsataman, shundan so'ng men nima haqida ekanligini tushuntiraman. bu bizning qatorimizning ko'rinishini blokning kengligi bilan chegaralagan va shu bilan barcha bayonotlarni kesib tashlagan va ularni kuzatuvchiga ko'rsatmagan;
• Va nihoyat, biz qo'shimcha quvvat olish uchun qatorimizga uchta dog' qo'shdik matnni to'ldirish: ellips, bu bilan sizga bu qatorning oxiri emasligini va siz ayiqni olib kelishingiz va uni atrofga hayratda qoldirishingiz kerak bo'lishi mumkinligi haqida aniq tushuncha beradi.

CSS-ni seving, CSS-ni seving va veb-saytlarni ishlab chiqish siz uchun unchalik oson bo'lmaydi =)

Har qanday matnni bir qatorga qo'yish kerak bo'lsa, muammo bilan birga qo'shiq aytish juda qiziqarli.
Bunday holda, matn ancha uzunroq bo'lishi mumkin va bu matn paydo bo'ladigan blokning kengligi brauzer oynasi bilan bir xil o'lchamda bo'lsa ham, dastlab chegaralanadi. Shuning uchun matnni to'ldirish kuchi ixtiro qilingan, u CSS3 tavsiyasiga kiritilgan va birinchi marta IE6 da uzoq vaqt oldin amalga oshirilgan. Blok uchun qiymat mavjud bo'lganda, agar matn blokning o'zi kengligidan katta bo'lsa, matn kesiladi va oxirida nuqta qo'yiladi.

Garchi bu erda hamma narsa oddiy bo'lmasa-da, keling, biroz keyinroq aylanaylik. Internet Explorer hamma narsani aniq ko'rsatdi, boshqa brauzerlar haqida nima deyish mumkin? Men .. moqchiman hozirgi moment

CSS3 spetsifikatsiyasiga ko'ra, quvvat matnini to'ldirish o'chirilgan, Safari uni qo'llab-quvvatlaydi (3-versiyada bo'lgani kabi), Opera ham (9-versiyadan boshlab, lekin u power-o-overflow-text deb ataladi).
Ammo Firefox 3-versiyasi uchun mavjud emas, qo'llab-quvvatlamaydi va mavjud bo'lmaydi.

1. Bu aqldan ozgan, lekin bu haqiqat.
2. Assalomu alaykum, balki pul ishlasam bo'ladimi?

Albatta pul ishlashingiz mumkin.

Agar siz Internetda ushbu quvvat diskidan va qanday qilib Firefox-dan qidirsangiz, ustiga bosing
qarorlarni kechiring
.

Qarorning mohiyati:

Bundan tashqari, qo'shimcha darslarning yo'qligi haqida tashvishlanish yaxshi emas, chunki bu tuzilma keyingi yordam uchun eng yaxshisidir.

.
Agar Opera va Safari kabi psevdoelementlarni targ'ib qilishda yaxshi bo'lgan Firefox-da ularni joylashtirish rejasi bo'lsa (pozitsiyani/floatni aniqlash va h.k.), ellips uchun xuddi shu blokni vikorizatsiya qilish mumkin edi.

Qolgan 3 ta qoidani haqoratli qoidalar bilan almashtirib ko'ring:

Opera va Safari-da hammasi avvalgidek ishlaydi, uchta nuqtali qo'shimcha bloksiz.

Va Firefox o'qi - rozcharova.

Aje xuddi nogo mi robimo ríshennya uchun. Xo'sh, siz kob HTML tuzilishi bilan shug'ullanishingiz kerak. } Croc boshqacha Siz sezganingizdek, agar matn blokga to'g'ri kelsa, dog'lar paydo bo'lishi bilan bog'liq muammolar mavjud. */

Tahrirlanadigan CSS:

Agar men keyingi safar yon sahifaga qarasam (ushbu maqolani yozishga tayyorgarlik ko'rishdan oldin), men eng boshlanishini eslayman, keyin qiziqish uchun men oqilona aqlli g'oyalar uchun sharhlarni ko'rib chiqaman. Va bilaman, sharhlarda Firefox va IE da ishlaydigan boshqa yechim bor edi (bu odam uchun, birinchi maqola muallifi kabi, boshqa brauzerlar, ehtimol, muhim emas). Shunday qilib, muallif ushbu hodisani (shu jumladan matnning to'lib ketishi), ayniqsa to'lib-toshgan va to'ldiriladigan elementlar bilan shug'ullanishga qaror qildi, agar kerak bo'lsa, tasdiq belgisini qo'yish kerak.

Bu yomon emas, lekin menimcha, boshqa yo'l bilan borish yaxshiroq (resurslar nuqtai nazaridan), ayniqsa, bu erda yana bir narsa bor. Biroq, keling, ushbu narsadan foydalanib, bunga qanday erishish mumkinligini aniqlaylik va CSS-ning o'zi moz-bog'lash kuchiga ega. Men tushunganimdek, bu IEdagi xatti-harakatlarning analogidir, ammo boshqa sous va sovutgich bilan. Tafsilotlarni unutmaylik, aytaylik, shu tarzda siz JavaScript qidiruvchisini elementga biriktirishingiz mumkin. Men sizga CSS bilan yordam beraman . } Bu ajoyib eshitiladi, lekin u ishlaydi. Biz nimadan qo'rqamiz: . } .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);

Birinchidan, agar fayl topshirilmagan bo'lsa va/yoki JavaScript qo'shimchalari talab qilinmasa, yaxshi, agar siz oxiriga dog'larni qo'shmasangiz, blok tugagandan so'ng matn o'chiriladi.

Shunday qilib, bu vaziyatda "engil" qaror rad etiladi.

Qarorning mohiyati:

Croc kvartallari

.ellipsis (toshib: yashirin; boʻsh joy: nowrap; chiziq balandligi: 1.2em; balandlik: 1.2em; matnning toʻlib ketishi: ellips; -o-matnni toʻldirish: 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; margin-top: -1,2em; ) .moz - ellipsis > DIV + DIV :: keyin (fon rangi: oq; kontent: "..."; ) Biz nihoyat qizil ramkani tartibga keltirdik :) Endi moz_fix.xml ga bir oz qo'shamiz: Bu yerda nima bo'lyapti? }

JavaScript kodi

eng yaxshi an'analardagi yozuvlar :)
Afsuski, vaziyat, agar matn xatning o'rtasidan kesilgan bo'lsa, biz engib bo'lmaydi (bu to'g'ri, ehtimol, orada, chunki mening qarorim hali juda zaif va kelajakda u chiqishi mumkin). Biz bu ta'sirni hech bo'lmaganda biroz yumshata olamiz. cho'zilmasdan universal deb atash mumkin.
Har bir narsa sizning joylashuvingiz va katlanuvchanligingizga qarab saqlanishi kerak.
Sizga ichimlik yoki ehtimol bubo kerak bo'lishi mumkin.

Agar siz eng ko'p portlashni xohlasangiz, men buni qilamiz deb o'ylayman.

Va keyin sizda to'g'ri nuqta bor;)

Umid qilamanki, siz ushbu statistik ma'lumotlardan ko'p narsa oldingiz;) Uni oling, tajriba qiling, baham ko'ring. Omad tilaymiz! CSS3 ning yuksalishi veb-dizaynerlarning kundalik hayotida inqilobiy o'zgarishlarni olib keladi.

CSS3 bugungi kunda bizni hayratda qoldirishda davom etmoqda.

Ilgari JavaScript yordamida nima qilish mumkin edi, endi CSS3 bilan ishlash oson.

Masalan, Text-Overflow kuchi. Ba'zan veb-saytlarni yaratish jarayonida biz keyingi qatorga o'tmasdan dinamik matnning bir qismini olishimiz kerak. Belgilangan kenglikdagi jadvalga qo'shimcha matn kiritish uchun.

Endi vaqt, koristuvachevaga matnning bir qismi ko'rinib turganini ko'rsatish kerak - bu hammasi.

Yana bir qismi qo‘lga olindi.
Xuddi shunday, siz trikraplarni (...) ko'rsatishingiz mumkin.

CSS3 bilan biz osongina yaratishimiz mumkin, vikorystyuchi quvvat CSS matn to'lib ketishi

Razmitka

Matnni to'ldirish: ellips;
Ahamiyati
ellips
matndan keyin uch nuqtali belgi qo'shish imkonini beradi (...)

tashqi ko'rinish

stol. Keyin biz 150 pikseldan oshiq matnni olishimiz kerak. Bu haqda koristuvachga ham aytmoqchimiz.

Shuni yodda tutingki, barcha nomlar ko'rsatilmaydi.

Biz sichqonchani ustiga olib borganingizda butun matn paydo bo'lishini xohlaymiz.

Keling, qo'shimcha CSS3 dan qanday foydalanishimiz mumkinligini ko'rib chiqaylik. Kompaniyani o'rash ul li ( matnni to'ldirish: ellips; Firefox, Netscape va boshqalar. Eski nomlar - "Raptor" va "NGLayout". Gecko ning asosiy kontseptsiyasi HTML, CSS, W3C DOM, XML 1.0 va JavaScript kabi muhim Internet standartlarini qabul qilishga asoslangan. Yana bir tushuncha o'zaro platformalardir. Bugun Gecko e'tiborini qaratadi

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 qavatni ko'rsatish uchun uslublar jadvaliga bitta qator qo'shishimiz kerak. Agar siz quvvatni o'chirmoqchi bo'lsangiz, shunchaki qo'shing:

Moz-binding: url("bindings.xml#none");
Keyingi qadam uslublar jadvali saqlanadigan joyda bindings.xml faylini yaratishdir.
Biz be-yak vikorystuvati mumkin
matn muharriri

kim uchun!
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


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

var strings= this.textContent.split(/\s+/g)

Matnni to'ldirish: ellips;
Ahamiyati
if(!strings[ 0 ]) strings.shift()
if(!strings[ strings.length - 1 ]) strings.pop()
this.value=strings.join(" ")
ellips
}

this.display=strings.length?

"" : "yo'q"

this.update()

Barcha brauzerlar uchun qolgan kod

-o-matnni to'ldirish: ellipsis;

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

	oq bo'shliq: nowrap;	CSS3 butun dunyo bo'ylab veb-dizaynerlar uchun minimal kod bilan hech qachon ko'rilmagan veb-saytlarni yaratish uchun mo'ljallangan vositaga aylanmoqda.
<тип>	Bu oddiy, tom ma'noda bir qatorda, ilgari faqat Photoshop yoki JavaScript yordamida mumkin bo'lgan echimlar.	<размер>
CSS3 va HTML5 imkoniyatlari haqida bugunoq o'rganishni boshlang va siz buzilmaydi!	Tarjimonlarning kulrang massasidan ajralib turish va sizning hamdardligingizni qozonish uchun, aziz o'quvchilar, mening darslarimda dono fikrlar va aforizmlar mavjud.	<размер> && <цвет>
Siz o'zingiznikini ushbu qatorlarda topishingiz mumkin :)	O'zgartira olmaydiganlarni sanadan boshlab o'tkazing.	Agar matn belgilangan hududga mos kelmasa, blokdagi matn uchun ko‘rinish sozlamalarini o‘rnatadi.
Ikkita variant mavjud: matn kesilgan;	Matn kesiladi va satr oxiriga dog' qo'shiladi.	kengligi ||
	hisoblash	Guruh ma'nosi.
*	[kesish ||	[,<время>]*
+	xoch]	<число>+
?	Nol yoki undan ko'p marta takrorlang.	Bir yoki bir necha marta takrorlang.
Tur ma'nosi, chi guruhi so'zi shart emas.	kiritilganmi?	<радиус>{1,4}
#	(A, B)	<время>#

×

A ni iloji boricha kamroq va ko'proq takrorlang.

Koma orqali bir yoki bir necha marta takrorlang.

CSS3 butun dunyo bo'ylab veb-dizaynerlar uchun minimal kod bilan hech qachon ko'rilmagan veb-saytlarni yaratish uchun mo'ljallangan vositaga aylanmoqda.

Ahamiyati

clip Matn hududga mos ravishda kesilgan.

ellipsis Matn kesiladi va satr oxiriga dog' qo'shiladi.

Osmon sferasining katta qismida magnit maydon ahamiyatsiz darajada o'chirilishi mumkin, chunki eksantriklik va zaif orbitalar o'sib boradi.

Ushbu dumba natijasi rasmda ko'rsatilgan. 1.

Guruch. 1. Matn oxirida Bagatokrapka

Ob'ekt modeli

Ob'ekt

.style.textOverflow

• Eslatma
• Opera 11 versiyasigacha vikorist power -o-text-overflow. Spetsifikatsiya Terining spetsifikatsiyasi yallig'lanishning bir necha bosqichlaridan o'tadi.
• Tavsiya - spetsifikatsiya W3C tomonidan yuqori baholanadi va standart sifatida tavsiya etiladi. Nomzod tavsiyasi ( Mumkin bo'lgan tavsiya
• ) - standartga mos keladigan guruh o'z maqsadlariga javob berishidan qoniqish hosil qiladi, lekin standartni amalga oshirish uchun mutaxassislardan qo'shimcha yordam talab qiladi.
• Taklif etilayotgan tavsiya Tavsiya qilingan) - bu bosqichda hujjat qoldiq tasdiqlash uchun W3C maslahat qo'mitasi tomonidan ko'rib chiqish uchun taqdim etiladi.
• Ishchi loyiha - muhokamadan so'ng loyihaning yanada etuk versiyasi va to'liqligini ta'minlash uchun tuzatishlar kiritildi. Tahririyat loyihasi ( Chernetka muharriri

×