Divning bo'sh joyi siqib chiqarilganda kesiladi.

topshirish

Golovna

Lekin biz qanday qilib dog'ni qo'yishimiz mumkin, chunki biz blokni o'lchamiga qo'sha olmaymiz?

JS skriptidan qanday foydalanish kerak?

Siz buni qila olasiz, lekin
Hmm, albatta qila olamiz.
Eksa kodi, shu jumladan Unicode belgilari va kerak bo'lganda
Endi siz ro'yxatning teri elementidagi matnni kesib tashlash effektiga erishishingiz kerak, unga dog' qo'shishingiz kerak.
CSS matnni kesish
Kim uchun biz sinf tit uchun uslub yaratamiz
}

.tit (

oq bo'shliq: nowrap;
/* Matn uzatishga ishora qiladi */

toshib ketish: yashirin;

/* Siqish uchun kesish */

to'ldirish: 5px;
/* Maydonlar */

matnni to'ldirish: ellips;

/* Bagatokrapka */
Ushbu qarorning o'ziga xosligi shundaki, agar matn blokning o'lchamiga to'g'ri kelsa, matn qo'shilmaydi.

Qarorlarda nima noto'g'ri?

Ê belgilangan balandlik va kenglikdagi blokning o'rtasida ko'rsatilishi kerak bo'lgan kunning matni.

Bunday holda, agar matn to'g'ri joylashtirilmasa, topshiriq blokiga to'liq joylashtirilgan matnning bir qismi ko'rsatiladi, undan keyin qizil belgi qo'yiladi.

Bunday vazifa kengayishda davom etadi, lekin u ko'rinadigan darajada ahamiyatsiz bo'lmaydi.

Bir qatorli matnli CSS varianti Bunday holda, siz kuch matn-toshib vikorystvuvat mumkin: ellipsis. Bunday holda, konteyner ona kuchi uchun aybdor toshib ketish Rivne yashirin

yoki boshqa

klip

Blok (kenglik: 250px; boʻsh joy: nowrap; toʻldirish: yashirin; matn toʻldirish: ellipsis;) CSS-da boy matn uchun imkoniyat Vikilardan ko'p sonli matnlarni kesishning birinchi usuli CSS organlariі zastosuvati psevdoelementlar: oldin

.

Yangi boshlanuvchilar uchun HTML tartibi

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Minimal mashqlarni bajarishdan oldin, buning uchun hech qanday qiyinchilik tug'dirmaydi.

Duis autom vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis on vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue. Va endi hokimiyatning o'zi Box (to‘ldiruvchi : yashirin ; balandlik : 200px ; kenglik : 300px ; chiziq balandligi : 25px ; ) .box :oldin (kontent : "" ; float : chap ; kenglik : 5px ; -child (float : o'ng ; eni : 100%) ; margin-left : -5px ; 3em padding-right : 5px : o'ng fon : 100% 100% fon : chiziqli gradient (r (255, 255, 0), oq 50%); Yana bir usul - ustun kengligi kuchini o'zgartirish, bu sizga katta qatorli matn uchun ustun kengligini o'rnatish imkonini beradi..

Asosiysi -webkit-line-clamp, bu blokda ko'rsatiladigan qatorlar sonini belgilash imkonini beradi.

Yechim yanada chiroyli, ammo ishingizni bir xil brauzerlar guruhiga cheklash kerak.

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

JavaScript-da boy matn uchun imkoniyat

Bu erda qo'shimcha ko'rinmas blok yaratiladi, bu erda bizning matnimiz dastlab joylashtiriladi, shundan so'ng bu blokning balandligi kerakli blok bilan bir xil balandlikdan past bo'lgunga qadar bir vaqtning o'zida bir belgi o'chiriladi.

Va nihoyat, matn chiqish blokiga o'tadi.

var blok=hujjat. querySelector(".blok"), matn = blok. innerHTML, klon=hujjat.

createElement("div");

klonlash.

uslub.

Buning o'rniga siz uning bir qismini olishingiz mumkin.

Suzuvchi elementlarni joylashtirish uchun konteyner bloklari uchun ishlatiladi.

Shuningdek, u suzuvchi elementlar ostida ko'rsatilgan fon yoki kordonlarni himoya qiladi (buning uchun float quvvati o'rnatiladi: chap / o'ng; . Bunday holda, idishning o'lchami o'zgarmaydi.

Guruch. 1. Qo'shimcha quvvat sarfi uchun blok o'rniga kesish Sintaksis: div (kenglik: 200px; balandlik: 150px; toshib ketish: yashirin; )

2. Quvvatning oshib ketishi-x

Quvvat blokning o'rtasida joylashgan tarkibning o'ng qirrasi har safar o'zgartirilganda qanday qilib kesilishini aniqlaydi.

Shuningdek, u suzuvchi elementlar ostida ko'rsatilgan fon yoki kordonlarni himoya qiladi (buning uchun float quvvati o'rnatiladi: chap / o'ng; . Bunday holda, idishning o'lchami o'zgarmaydi.

Sintaksis:

Div (toshib ketish-x: yashirin; )

3. Quvvatning oshib ketishi-y

Quvvat, blokning o'rtasida joylashgan kontentning pastki chetini har safar qayta joylashtirilganda qanday qilib kesilganligini aniqlaydi. Div (toshib ketish: yashirin; ) 4. Quvvat qisqichi Quvvat elementning qancha ko'rinishini anglatadi. Elementning kesishdan keyin ko'rinmaydigan qismi kesilgan maydon deb ataladi.

Aralash darhol ko'rinadigan elementga joylashadi. Quvvat mutlaq va qat'iy qiymatlar bilan quvvat pozitsiyasi o'rnatiladigan elementlarga to'xtab qoladi. Ushbu maqola sizga bu haqda ma'lumot beradi Quvvat mutlaq va qat'iy qiymatlar bilan quvvat pozitsiyasi o'rnatiladigan elementlarga to'xtab qoladi. 3 shved i

oddiy usullar

CSS , siz sahifangizdagi rasmning faqat bir qismini ko'rsatish uchun foydalanishingiz mumkin.)

Bu yerdagi barcha usullar, aslida, bir nechta qatorlarni talab qiladi №2 CSS kod. Biroq, bu so'zning to'g'ridan-to'g'ri ma'nosida sunnat emas ( kod. Men hali hech narsa qila olmayman), biz faqat rasmning o'zimiz yoqtirmoqchi bo'lgan qismini ko'rsatmoqchimiz. Agar siz rasmni mukammal o'lchamga keltirmoqchi bo'lsangiz yoki, masalan, yangi bo'limda eskiz (tasvirning o'zgartirilgan nusxasi) yoki shunga o'xshash narsalarni yaratmoqchi bo'lsangiz, bu usullar yanada ekstremal bo'lishi mumkin.і 1-texnika - salbiy maydonlarning vikoristiyasi ( Rasmni xohlaganingizcha aylantiring, jarayon ma'nosida: tasvirning qaysi qismi ko'rsatilishi kerak va qaysi biri ko'rsatilmasligi kerak.

HTML Ilg'or texnologiya kodiga o'xshash:

Rasmni kesish ( pozitsiyasi: mutlaq;)

yuqori: - 40px; chap: - 50px; Texnika 3 - kesishning yuqori kuchi ( Klip xususiyati: Axir, bu texnologiya eng engil bo'lishi mumkin klip xususiyati

ko'rsatilishi kerak bo'lgan elementning bir qismini bildiradi.

Bu puxta qarorga o'xshaydi, lekin unday emas bitta tutish kesilgan element

Element tanlash imkoniyatiga ega bo'lish uchun biz qo'shimcha element qo'shishimiz kerak, tasvirning ko'rinadigan maydonining o'lchamini hisoblashimiz kerak, bu o'lchamni otaga qo'shishimiz kerak, otani qo'yib yuboring ... Kupa robotlar, nima bo'ldi ?

Oh, yana bir muammo: kesilgan elementning o'lchami trimning o'lchamiga o'zgarmaydi, lekin boshoq o'lchamiga yo'qoladi (ekinning chetlari orqasidagi rasm shunchaki yo'qoladi). Otaning yuqori chap burchagi yaqinidagi ko'rinadigan joyni yo'q qilish uchun biz mutlaq joylashishni vikoristuvat qilishimiz kerak. Biroq, noma'lumlardan birini mahrum qilish mumkin emas kesish kuchi. Bunday holda, siz kuch matn-toshib vikorystvuvat mumkin: ellipsis. Bunday holda, konteyner ona kuchi uchun aybdor toshib ketish Rivne yashirin .

Va men kodni shunday bilaman ...

css shablon

Biz har doim saytdagi hamma narsa toza bo'lishini xohlaymiz, lekin masalan, sizda matnli bloklar mavjud bo'lib, ular qatorlarga kiritilishi kerak, bu maqolaga e'lon yoki mahsulot tavsifi bo'lishi mumkin.

Bunday holda, matn juda uzoq vaqt oladi.

Siz shunchaki matnni maydonning o'lchamiga qarab sozlashingiz mumkin, shunda hech narsa etishmaydi, lekin uni kerakli matn mos keladigan tarzda yaratishingiz mumkin. CSS organlari і zastosuvati psevdoelementlar .

Box-matn ( overflow: yashirin; balandlik: 200px; chiziq balandligi: 25px; ) .box-text:before (kontent: ""; float: chap; eni: 5px; balandlik: 200px; ) .box-text > * :birinchi bola ( float: o'ng; eni: 100%; chet-chap: -5px; ) .box-text:after (kontent: "\02026"; quti o'lchami: content-box; float: o'ng; pozitsiya: nisbiy: -25px; padding-o'ng: 100% , 255, 0), oq 50%;

O'rmonning chap tomoni qorong'i, soyada edi;