CSS so'zlarni majburiy o'rash. CSS yordamida uzun so'zlarni o'rash

Internet tarkibdan, kontent so'zlardan iborat va so'zlar juda uzun bo'lishi mumkin. Va ertami -kechmi, webmaster uzun so'zlarni defislash muammosiga duch keladi. Bu muammo, ayniqsa, sezgir dizayn va kontentning kichik bloklari uchun to'g'ri keladi. Xo'sh, bu muammo bilan qanday kurashasiz?

Defis

Uzoq so'zlarni defisatsiya qilishning birinchi echimi - defis.

Defisi (-webkit-defis: avto; -moz-defis: avto; -ms-defis: avto; defis: avto;)

Brauzerni qo'llab -quvvatlash: CSS chiziqlari Chrome, Opera, Android -dan tashqari deyarli barcha zamonaviy brauzerlar tomonidan qo'llab -quvvatlanadi. Shuningdek, ko'pincha grammatik jihatdan noto'g'ri joylarga defis qo'yiladi.

So'zni buzish

So'zlarni ajratish - bu CSS xususiyati bo'lib, u so'zlar ichidagi satrlarni kesish kerakligini aniqlaydi.

Obriv-slova (-ms-so'z-uzilish: hamma-hammasini buzish; so'z-parcha: hamma-hammasini buzish; so'z-parcha: buzish-so'z;)

Brauzerni qo'llab -quvvatlash: So'z uzilishi Opera Mini va Opera -ning eski versiyalaridan tashqari barcha brauzerlarda qo'llab -quvvatlanadi.

To'ldiruvchi o'rash

Keyingi yechim overflow-wrap-dan foydalanishdir.

Obertka-perepolneniya (so'zlarni yig'ish: buzish-so'z; to'lib-toshish: kesish-so'z;)

Brauzerni qo'llab -quvvatlash: deyarli barcha brauzerlarda qo'llab -quvvatlanadi. Eslatma: Ba'zi brauzerlar "to'ldirish-o'rash" o'rniga "so'zni o'rash" dan foydalanishni talab qiladi.

Ellipsis

Boshqa variant - ellipsdan foydalanish.

Mnogotochiye (to'lg'azish: yashirin; oq bo'shliq: nowrap; matn to'lishi: ellips;)

Brauzerni qo'llab -quvvatlash: barcha zamonaviy brauzerlar tomonidan qo'llab -quvvatlanadi.

Bu ish uslubi, lekin idealdan uzoq.

Yakuniy yechim: To'ldirish va defis o'rashdan foydalanish.

Finalnoye-resheniye (to'ldirish-o'rash: uzilish-so'z; so'z-o'rash: kesish-so'z; -webkit-defislar: avto; -ms-defislar: avto; -moz-defislar: avto; defislar: avto;)

Bu yechim uni qo'llab-quvvatlaydigan brauzerga defis qo'yishga, qo'llab-quvvatlanmaydigan brauzerlar uchun esa chiziq uzilishini kiritishga imkon beradi.

Uzoq so'zlarni qanday o'rash kerakligini aniqlang:

1. faqat chiziq, bo'sh joy yoki Enter mavjud bo'lgan joyda (bundan mustasno, bo'sh joy va uzilmaydigan defis-). Tire bir so'zning qismlari orasiga yoziladi (masalan, qizil va sariq), so'zlar orasida - chiziqcha. "Yumshoq defis" - faqat defis qo'yish zarur bo'lganda paydo bo'ladi. Agar so'z ota -ona doirasidan tashqarida bo'lsa, demak yoki uning bir qismini chiziqsiz uzatadi. Minus matematik ifodalarda ishlatiladi (masalan, 5 - 2). Telefon raqamlarida raqamli chiziq ko'rsatiladi (masalan, +7 800 000‒00‒00). Va bularning barchasi tanish emas - bu klaviaturada.
2. har qanday belgidan keyin.
3. avtomatik tire bilan rus tili qoidalariga ko'ra.

to'ldirish
so'z birikmasi
so'z buzish
chiziq uzilishi
defis

bizning bir ming to'qqiz yuz to'qson to'qqiz kilogrammimiz qayta ko'rib chiqilgan buldozer-yuk mashinasi

Bir mulkning boshqasidan farqi nimada

Odatiy bo'lib, uzun so'zlar defis bilan aniq ko'rsatilmaguncha, defis qo'yilmaydi va yangi satrdan boshlanadi.

Ko'zga darhol ko'rinadigan chiziqlarni e'tiborsiz qoldirish uchun, biz so'zlarni ajratib qo'shamiz: keep-all; ...

Brauzer yumshoq defisga e'tibor bermasligi uchun biz defis qo'yamiz: yo'q; ...

Agar so'zni yig'ish kerak bo'lsa, unda so'zni almashtirish: break-word; Men uni har doim ishlatishni maslahat beraman, chunki uni hamma brauzerlar tushunadi. Bu so'zni ajratishdan farq qiladi: hammasini sindirish; birinchi o'ringa qo'yilgan, blokga mos bo'lmagan so'zlar yangi satrdan boshlanadi va yumshoq chiziqcha tavsiyanomasi hurmat qilinadi.

Birgalikda ishlatilganda, so'zni ajratish: hamma-hammasini buzish; defis bilan: avtomatik; , ikkinchisi e'tiborga olinmaydi. chiziqcha: avtomatik; xohlagancha defis qo'yadi. Lekin u ishlashi uchun siz divda lang = "ru" atributini ko'rsatib, tilingizni belgilashingiz kerak.

So'zlarni boshqa qatorga o'tkazmang

Aytaylik, menyu elementi yoki tugmachasi parchalanib ketsa yaxshi ko'rinmaydi. Shuning uchun ularni ajratishni taqiqlash kerak. Buning uchun yuqoridagi barcha xususiyatlar "standart" rejimga o'rnatilishi va qo'shilishi kerak. Bizning ko'pburchakni bosing va qarang.

Tire qo`yilganda boshqaruv so`rovi: avtomatik;

Tetrahidropiranilsiklopentiltetrahidropiridopiridin

Hammaga salom). Men sizga CSS tilining turli xil foydali xususiyatlari haqida yozishni davom ettiraman, bu sizga tartibda yordam beradi. Va bugun men sizga aytmoqchimanki, agar so'zlar sizning konteyneringizga mos kelmasa, ularni CSS -ga qanday o'rash kerak. Men sizga hamma narsani haqiqiy misol bilan ko'rsataman.

Mos kelmaydigan so'zlar uchun defisni yoqing

Aytaylik, menda 100 pikselli blok bor va unga matn yozishim kerak. Matnda " o'z-o'zidan qazib olish". Bu, masalan, arxiv) Lekin nuqta emas. Bu so'z juda uzun, u faqat idishning kengligiga to'g'ri kelmaydi. Keling, shunday tor blokda (100 piksel) yozaylik. Nima bo'ladi?

Ko'rib turganingizdek, bechora so'z konteynerdan chiqib ketdi, uning boradigan joyi yo'q, nima qila olasiz. Va bu chiziqsiz. Shunday qilib, bu erda so'zni o'rash xususiyati yordamga keladi. Mana sizga so'zlarni almashtirishni yoqish uchun blokdan so'rashingiz kerak bo'lgan narsa:

So'zni o'rash: so'zni ajratish;

Va ishontirish uchun siz to'ldirishni ham qo'shishingiz mumkin. Shunday qilib, mulkni qo'llaganimizdan so'ng, biz juda uzun so'zlar harflar bilan boshqa qatorga o'ralganini ko'ramiz. Bundan tashqari, agar ikkinchi qator bir so'z uchun etarli bo'lmasa ham, qolgan qismi uchinchisiga o'tkaziladi va hokazo.

Shuni ta'kidlashni istardimki, bu mulkdan xavfsiz foydalanish mumkin. Birinchidan, u bugungi kunda brauzerlarda juda yaxshi ishlaydi. Ikkinchidan, u aqlli ishlaydi. Ya'ni, barcha oddiy so'zlar uchun defis bo'lmaydi, so'zlarning hammasi keyingi qatorga o'tkaziladi, shuning uchun o'qish qobiliyati buzilmaydi. Buni skrinshotda ko'rishingiz mumkin.

Word-wrap-ni qachon ishlatish kerak

Aslida, hozirgacha men 2 ta foydalanish holatini ko'rmoqdaman. Birinchisi, faqat tor bloklar uchun, siz uzoq so'zlar blok chegaralaridan yomon chiqib ketishidan qo'rqasiz. Ikkinchisi, dizayner homilador bo'lganida, sayt nomi bir necha qatorda bo'lishi kerak.

Shunday qilib, ushbu maqolada biz CSS -da so'zni qanday yozishni o'rgandik. Bugun men uchun hammasi shu. Ko'rishguncha.

Hammaga salom va boshlaylik. Aytaylik, bizda quyidagi matn bor:

Birlashgan Arab Amirliklari hukumati va ma'muriyati bu shaharda ilm -fan va texnikaning eng yangi yutuqlariga asoslangan eng yangi texnologiyalarni jamlaydilar, xuddi o'z ilmiy shaharlaridan birining ekranidan chiqib ketgandek, o'z shahrini kelajak shahriga aylantirishga harakat qiladilar. Bu texnologiyalar politsiya robotlari, robotli mashinalar va Hyperloop transport tizimini o'z ichiga oladi va yaqin kelajakda Dubayda avtomatik uchuvchi taksi xizmati ishlay boshlaydi. Va bu tadbirga tayyorgarlik ko'rishda, taksida ishlatiladigan 18 rotorli, ikki o'rindiqli elektr Volokopter birinchi parvozini avtomatik rejimda amalga oshirdi, deb yozadilar ...

bu erda biz matnni ko'rsatdik, u bilan biz endi ishlay boshlaymiz.

Va biz ko'rib chiqadigan birinchi mulk so'zni ajratish deb nomlanadi.

so'zlarni ajratish: normal | hamma narsani saqla | barchasini buzish

Bizni, odatda, bu xususiyatning ikkita normal qiymati qiziqtiradi - bu qiymatni belgilashda biz belgilagan qiymat va uzilish. Hamma uchun bu qiymat xitoy, yapon va koreys tilidagi so'zlarni o'rash uchun ishlatiladi.

P (so'zlarni ajratish: barchasini buzish;.)

Shuni esda tutingki, ushbu uslub qo'llanilgandan so'ng, bizning barcha matnimiz to'liq kenglikda bo'ladi va defis so'zlar bilan emas, balki belgilar bilan amalga oshiriladi. Bu xususiyat, agar bizda berilgan kenglikka mos kelmaydigan juda uzun so'z bo'lsa, foydali bo'lishi mumkin. Biroq, bu qandaydir noqulaylik tug'diradi, chunki mutlaqo barcha so'zlar xarakterga ko'ra, hatto berilgan kenglikka mos keladigan so'zlarga ham o'tkaziladi.

Yaxshiyamki, shunga o'xshash xususiyat borki, u faqat mos bo'lmagan so'zlarni belgilar ustiga o'tkazadi. Bunga overflow-wrap deyiladi:

P (to'ldirish-o'rash: uzilish-so'z;)

va break-word qiymatini qo'llaganimizdan so'ng, bizning barcha matnlarimiz so'zlar bilan o'ralgan va berilgan kenglikka mos bo'lmagan so'zlar belgi bilan o'ralgan. Aytishimiz mumkinki, vazifa tugadi! So'zlar qiymatidan tashqari, bu xususiyat quyidagilarni qabul qiladi:

to'ldirish: oddiy | so'zlar | meros qilib olmoq;

Endi matnni so'z bilan almashtirish uchun yanada rivojlangan CSS xususiyatiga o'tamiz.

Matnni bitta bo'shliqqa o'zgartirmasdan, oldingi yorliq ishini simulyatsiya qilishimiz mumkin bo'lgan oq bo'shliq xususiyatini ko'rib chiqing.

oq bo'shliq: normal | hozir | oldindan | oldingi qator | oldindan o'rash | meros qilib olmoq

Aslida, bu xususiyatdan foydalanib, biz faqat matndagi bo'shliqlar bilan ishlaymiz. Masalan, agar biz matnimizga quyidagi uslubni qo'llasak:

Oq bo'shliq: nowrap;

barcha satr uzilishlari e'tiborga olinmaydi va bizning matnimiz bitta satr sifatida ko'rsatiladi.

Oq bo'shliq: oldingi;

Pre holatida barcha satr uzilishlari manba kodidagi kabi bo'ladi. Bundan tashqari, agar matn belgilangan kenglikka mos kelmasa, u o'ralmaydi. Agar biz uning o'tkazilishini xohlasak, oldingi satr qiymatini ko'rsatishimiz kerak.

Agar biz manba kodidagi satr uzilishlarini emas, balki so'zlar orasidagi bo'shliqlarni ham hisobga olishni istasak, quyidagilarni ko'rsatishimiz kerak:

Oq bo'sh joy: oldindan o'rash;

Men sizga CSS yordamida so'zlarni o'rash haqida aytmoqchi bo'lgan narsam shu. Umid qilamanki, bu maqola siz uchun foydali bo'ldi va siz olgan bilimlaringizni bir necha bor ishlatasiz.

Xo'sh, men siz bilan xayrlashaman. Sizga muvaffaqiyat va omad tilayman! Xayr!

Joylashtirish paytida nashriyotchilarda vaqti -vaqti bilan savol tug'iladi: matnni uzatish qanday amalga oshiriladi? Ko'p hollarda brauzer bu vazifani o'zi hal qiladi. Lekin ba'zida bu jarayonni nazorat ostiga olish kerak bo'ladi, ayniqsa, noto'g'ri chiziqcha qo'yilsa, ma'nosini yo'qotadigan uzun so'zlar va iboralarni loyihalash orqali.

So'zni o'rash xususiyati

HTMLda satrlarni ajratish uchun maxsus teg mavjud
... Ammo uni tez -tez ishlatish ishlab chiquvchilar orasida yomon shakl deb hisoblanadi va ko'pincha noprofessionallikni ko'rsatadi. Buning isboti sifatida sizda logotip borligini tasavvur qiling va har bir harf yangi satrda boshlanishini xohlang:

Natijada har qanday ishlab chiqaruvchiga madaniy zarba beradigan og'ir va yomon kod. Va agar siz logotip ish stoli versiyasida gorizontal va ekran kengligi 550 pikseldan kam bo'lsa, vertikal bo'lishini xohlasangiz nima bo'ladi? Shuning uchun, har doim elementlarning ko'rinishini sozlash uchun kaskadli uslublar jadvallaridan foydalaning. Bundan tashqari, CSS vositalari yordamida chiziq uzilishlari yanada oqlangan tarzda amalga oshiriladi. Shu bilan birga, ortiqcha belgilash yo'q, bu faqat sahifani yuklash tezligini pasaytiradi.

So'zni qayta ishlashni birinchi ko'rib chiqadigan xususiyat-bu so'zni o'rash. Uchta qiymatni qabul qiladi: normal, buzish va hamma narsani saqlash. Ishlash uchun siz faqat break-allni eslab qolishingiz kerak. Oddiy odatiy bo'lib, uni ko'rsatishning ma'nosi yo'q. Keep-all CSS hujjatida chiziq uzilishiga yo'l qo'yilmaydi. Xitoy, yapon va koreys harflari uchun maxsus yaratilgan. Shuning uchun, agar siz ushbu tillarning hech birida blog yuritmoqchi bo'lmasangiz, bu mulk siz uchun foydali bo'lmaydi. Bundan tashqari, Safari brauzeri va iOS mobil telefonlari tomonidan qo'llab -quvvatlanmaydi.

Oldingi misoldan logotipning har bir harfiga CSS -dan foydalanib qatorni ajratish uchun siz quyidagi kodni yozishingiz kerak:

P (shrift: qalin 30px Helvetica, sans-serif; kengligi: 25px; so'zni o'rash: hamma narsani buzish;)

Shriftning kengligi va o'lchami shunday tanlanganki, bittagina harf uchun joy etarli. Hamma qiymatli so'zlarni yig'ish brauzerga har safar so'zni yangi qatorga o'rashini aytadi. Bu mulkni o'zgarmas deb bo'lmaydi. Ammo bu matnli kichik bloklarni, masalan, sharhlarni kiritish maydonlarini loyihalashda qo'l keladi.

Oq kosmik mulk

Boshlang'ich veb -ishlab chiquvchilar uchun keng tarqalgan xato - matnni bo'sh joy bilan tahrirlashga urinish yoki Enter tugmasini bosish, keyin nima uchun ularning harakatlari sahifada ko'rinmasligiga hayron bo'lish. Enter ni necha marta bosmasligingizdan qat'i nazar, brauzer bunga e'tibor bermaydi. Ammo matnni xohlaganingizcha va hamma oraliqlarni hisobga olgan holda ko'rsatishning bir usuli bor.

CSS hujjatida bo'sh joy xususiyati yordamida belgilanadigan chiziqlar tanaffuslari bo'sh joylarni hisobga oladigan tarzda sozlanishi yoki Enter tugmasini bosilishi mumkin. Old satr qiymati bo'lgan bo'sh joy brauzerni matnda Enter ni ko'rishga majbur qiladi.

Agar siz CSS-kodni oldingi qatorga oldindan o'rashga o'zgartirsangiz, chiziqlar orasidagi bo'shliqlar hisobga olinadi. Aksincha, oq bo'shliq xususiyatini matnga nowrap qiymati bilan belgilash orqali har qanday defisga yo'l qo'ymang:

#o'rash p (rang: #FFF; to'ldirish: 10px; shrift: qalin 16px Helvetica, sans-serif; oq joy: nowrap;)

Matnni to'ldirish

Matn bilan ishlashning yana bir foydali vositasi-bu matnni to'ldirish. Satr uzilishlaridan tashqari, CSS xususiyati konteyner to'lganida kontentni kesishga imkon beradi. Buning uchun ikkita qiymat kerak:

• klip - shunchaki matnni kesib tashlaydi;
• ellips - ellipsis qo'shiladi.

#wrapper p (rang: #FFF; to'ldirish: 10px; shrift: qalin 16px Helvetica, sans-serif; matnni to'ldirish: ellipsis; / * Ellipsis qo'shish * / oq bo'shliq: nowrap; yashirin; / * Hammasini idishdan tashqarida yashirish * /)

Mulk ishlashi uchun elementga maxfiy qiymat bilan chiziq uzilishi va to'lib ketishi ham tayinlanishi kerak.