Css taškai, jei netelpa. Vienos arba kelių eilučių teksto apkarpymas iki aukščio pridedant elipsę

Kai kuriais atvejais bloko turinys pasirodo už elemento ribų ir jį sutampa. Norėdami valdyti bloko lygio elementų veikimą, naudokite perpildymo ypatybę, kuri nustato, kaip turėtų būti rodomas turinys, esantis už bloko ribų.

Naudodami klipo ypatybę galite apkarpyti elementą iki nurodytų matmenų.

1. Perpildymo savybė

Bloko elementų turinys gali perpildyti bloką, kai blokas turi aiškų aukštį ir (arba) plotį. Nenurodžius aukščio, blokas ištemps, kad tilptų turinį, nebent blokas yra tokioje padėtyje: absoliutus; arba padėtis: fiksuota; . Tekstas gali perpildyti bloką aukštyje, vaizdai - aukštyje ir plotyje.

2. Perpildymo-x savybė

Ypatybė nurodo, kaip bus nupjautas dešinysis bloko turinio kraštas, jei jis persipildys.

Sintaksė:

Div (perpildymas-x: paslėptas;)

3. Perpildymo y savybė

Ypatybė nurodo, kaip bus apkarpytas apatinis bloko turinio kraštas, jei jis persipildys.

Sintaksė:

Div (perpildymas-y: paslėptas; )

4. Klipo savybė

Savybė nustato, kiek elemento bus matoma. Elemento dalis, kuri lieka matoma po apkarpymo, vadinama kirpimo sritimi. Iškirpimas taikomas elementui, kuris iš pradžių yra visiškai matomas. Savybė taikoma elementams, kurių padėties savybė nustatyta į absoliučią arba fiksuotą.

Yra savavališko ilgio tekstas, kuris turi būti rodomas fiksuoto aukščio ir pločio bloke. Tokiu atveju, jei tekstas netelpa iki galo, turi būti rodomas teksto fragmentas, kuris visiškai telpa duotame bloke, po kurio nustatoma elipsė.

Ši užduotis yra gana įprasta, tačiau tuo pat metu ji nėra tokia nereikšminga, kaip atrodo.

Vienos eilutės teksto parinktis CSS

Tokiu atveju galite naudoti ypatybę text-overflow: elipsis. Tokiu atveju konteineris turi turėti nuosavybę perpildymas lygus paslėptas arba klipas

Blokuoti (plotis: 250 tšk.; tarpas: nevyniojamas; perpildymas: paslėptas; teksto perpildymas: elipsė;)

Kelių eilučių teksto parinktis CSS

Pirmasis kelių eilučių teksto apkarpymo būdas yra naudoti CSS savybės taikyti pseudo elementus : prieš Ir : po. Pradėkime nuo HTML žymėjimo

O dabar pačios savybės

Dėžutė ( perpildymas : paslėptas ; aukštis : 200 pikselių ; plotis : 300 pikselių ; linijos aukštis : 25 pikseliai ; ) .box :before ( turinys : "" ; plūduriuoti : kairėje ; plotis : 5 piks. ; aukštis : 200 pikselių ; ) .first > -vaikas ( slankioji : dešinė ; plotis : 100 % ; paraštė kairėje : -5 pikseliai ; ) .box :after ( turinys : "\02026" ; dėžutės dydis : turinio dėžutė ; plūdė : dešinė ; padėtis : santykinė ; viršus : -25px : 3em padding-dešinė : 100% 100% (255, 255, 255, 0), balta ;

Kitas būdas yra naudoti stulpelio pločio savybę, su kuria nustatome kelių eilučių teksto stulpelio plotį. Tačiau naudojant šį metodą, nebus galima nustatyti elipsės pabaigoje. HTML:

Blokas ( perpildymas : paslėptas ; aukštis : 200 pikselių ; plotis : 300 pikselių ; ) .block__inner ( -webkit-column-width : 150px ; -moz-column-width : 150px ; stulpelio plotis : 150px ; 0%:x1)

Yra trečias būdas išspręsti kelių eilučių tekstą naudojant CSS naršyklėms Webkit. Jame turėsime naudoti keletą specifinių savybių su priešdėliu - žiniatinklio rinkinys. Pagrindinis yra -webkit-line-clamp, kuris leidžia nurodyti eilučių, kurios turi būti išvestos bloke, skaičių. Sprendimas yra gražus, bet gana ribotas, nes jis veikia ribotoje naršyklių grupėje

Blokas (perpildymas: paslėptas; teksto perpildymas: elipsė; ekranas: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertikaliai;)

Kelių eilučių teksto parinktis „JavaScript“.

Čia naudojamas papildomas nematomas blokas, kuriame iš pradžių dedamas mūsų tekstas, po kurio jis pašalinamas po vieną simbolį, kol šio bloko aukštis tampa mažesnis arba lygus aukščiui norimą bloką. Ir pabaigoje tekstas perkeliamas į pradinį bloką.

var blokas = dokumentas. querySelector(.block"), tekstas = blokas. innerHTML, klonas = dokumentas. CreateElement("div");

klonas stilius. pozicija = "absoliutus" ;

(funkcija ($ ) ( var truncate = funkcija (el ) ( var tekstas = el . tekstas (), aukštis = el . aukštis (), klonas = el . klonas (); klonas . css (( padėtis : "absoliutus" , matomumas : " paslėptas " , aukštis : " automatinis " )); ( klonas . tekstas ( tekstas . substring ( 0 , l ) + "..." ); el . tekstas ( klonas . pašalinti ( ) ); ( grąžinti šį . kiekvienas (funkcija () ( sutrumpinti ( $ ( tai )); ) ( jQuery ));

Problema

Apkarpyti kampus reikia ne tik greitas būdas pasiekti tikslą, bet ir populiari stiliaus parinktis tiek spaudinių, tiek interneto dizaino srityse. Dažniausiai tai susiję su vieno ar kelių talpyklos kampų pjovimu 45° kampu. IN pastaruoju metu, dėl to, kad skeuomorfizmas pradėjo prarasti pozicijas plokščiam dizainui, šis efektas yra ypač populiarus. Kai kampai nupjaunami tik iš vienos pusės ir kiekvienas kampas užima 50% elemento aukščio, susidaro rodyklės formos forma, kuri taip pat dažnai naudojama kuriant mygtukus ir navigacijos elementus.

Tačiau CSS vis dar neturi pakankamai įrankių, kad sukurtų šį efektą naudojant paprastus, paprastus vieno įdėklus. Dėl šios priežasties daugelis kūrėjų linkę naudoti fono paveikslėliai: arba padenkite nupjautus kampus trikampiais (vienos spalvos fone), arba sukurkite visą foną naudodami vieną ar daugiau vaizdų, kuriuose kampai jau nupjauti. Akivaizdu, kad tokie metodai yra visiškai nelankstūs, sunkiai prižiūrimi ir padidina delsą dėl papildomų HTTP užklausų ir bendro svetainės failų dydžio.

Svetainės pavyzdys, kuriame nupjautas kampas (pusiau permatomo lauko „Rasti ir užsakyti“ apačioje, kairėje) puikiai dera prie dizaino

Sprendimas

Vienas galimas sprendimas pasiūlykite mums visagalius CSS gradientus. Tarkime, kad norime tik vieno nupjauto kampo, tarkime, apatinio dešiniojo kampo. Gudrybė yra pasinaudoti gradientų galimybe paimti kampo kryptį (pavyzdžiui, 45 laipsnių) ir spalvų perėjimo ribų padėtį absoliučiomis reikšmėmis, kurios nesikeičia, kai bendrieji elemento matmenys, į kuriuos fonas priklauso keisti. Iš to, kas pasakyta, išplaukia, kad mums pakaks vieno tiesinio gradiento.

Pridėsime permatomą išblukimo kraštą, kad sukurtume nupjautą kampą, ir kitą išblukimo kraštą toje pačioje padėtyje, bet foną atitinkančios spalvos. CSS kodas bus toks (15 pikselių kampui):

fonas: #58a;
fonas: linijinis gradientas (-45 laipsnių, skaidrus 15 piks., # 58a 0);

Paprasta, ar ne? Rezultatą galite pamatyti paveikslėlyje.

Techniškai mums net nereikia pirmojo pranešimo. Pridėjome jį tik kaip sprendimą: jei CSS gradientai nepalaikomi, antroji deklaracija bus ignoruojama, todėl bent jau gausime vientisos spalvos foną. Tarkime, kad mums reikia dviejų nupjautų kampų, tarkime, abiejų apatinių kampų. To negalima padaryti naudojant tik vieną gradientą, todėl mums reikės dviejų. Jūsų pirmoji mintis gali būti maždaug tokia:

fonas: #58a;
fonas: linijinis gradientas (-45 laipsnių, skaidrus 15 pikselių, #58a 0), linijinis gradientas (45 laipsnių, skaidrus 15 pikselių, #655 0);

Tačiau tai neveikia. Pagal numatytuosius nustatymus abu gradientai užima visą elemento plotą, todėl vienas kitą užstoja. Turime juos sumažinti, apribodami kiekvieną iš jų iki pusės elemento, naudodami fono dydį:
fonas: #58a;

fono dydis: 50 % 100 %;

Rezultatą galite pamatyti paveikslėlyje.

Nors taikėme fono dydį , gradientai vis tiek persidengia vienas su kitu. Priežastis ta, kad pamiršome išjungti fono kartojimą, todėl kiekvienas fonas kartojamas du kartus. Vadinasi, vienas iš fonų vis dar užstoja kitą, bet šį kartą per pasikartojimą. Nauja versija kodas atrodo taip:
fonas: #58a;
fonas: linijinis gradientas (-45 laipsnių, skaidrus 15 pikselių, #58a 0) dešinėje, linijinis gradientas (45 laipsnių, skaidrus 15 pikselių, #655 0) kairėje;
fono dydis: 50 % 100 %;

Rezultatą galite pamatyti paveikslėlyje ir įsitikinti, kad jis pagaliau yra! - veikia! Tikriausiai jau atspėjote, kaip pritaikyti šį efektą visuose keturiuose kampuose. Jums reikės keturių gradientų ir kodo, panašaus į šiuos:

fonas: #58a;
fonas: linijinis gradientas (135 laipsnių, skaidrus 15 piks., #58a 0) viršuje, kairėje,

linijinis gradientas (-135 laipsnių, skaidrus 15 piks., #655 0) viršuje dešinėje,

tiesinis gradientas (-45 laipsnių, skaidrus 15 piks., #58a 0) apačioje dešinėje,

linijinis gradientas (45 laipsnių, skaidrus 15 piks., #655 0) apačioje kairėje;
fono dydis: 50 % 50 %;
fono kartojimas: nekartoti;

PATARIMAS
Naudojome skirtingas spalvas (#58a ir #655), kad būtų lengviau derinti. Praktiškai abu gradientai bus tos pačios spalvos.
Tačiau ankstesnio kodo problema yra ta, kad jį sunku prižiūrėti. Norint pakeisti fono spalvą, reikia atlikti penkis pakeitimus, o norint pakeisti kampo reikšmę – keturis. Mišinys, sukurtas naudojant išankstinį procesorių, gali sumažinti pakartojimų skaičių. Štai kaip šis kodas atrodytų SCSS:
SCSS
@mixin beveled-corners ($ bg,
$tl:0, $tr:$tl, $br:$tl, $bl:$tr) (
fonas: $bg;
fonas:
tiesinis gradientas (135 laipsnių, skaidrus $tl, $bg 0)
viršuje kairėje,
tiesinis gradientas (225 laipsnių, skaidrus $tr, $bg 0)
viršuje dešinėje,
tiesinis gradientas (-45 laipsnių, skaidrus $br, $bg 0)
apačioje dešinėje,
tiesinis gradientas (45 laipsnių, skaidrus $bl, $ bg 0)
apačioje kairėje;
fono dydis: 50 % 50 %;
fono kartojimas: nekartoti;
}

Tada jį galima iškviesti, kai reikia, kaip parodyta toliau, naudojant 2–5 argumentus:
SCSS
@įtraukti nuožulnus kampus (#58a, 15px, 5px);
Šiame pavyzdyje gausime elementą, kurio viršutinis kairysis ir apatinis dešinysis kampai apkarpyti 15 piks. mažiau nei keturios vertės. Tai įmanoma, nes mes taip pat pasirūpinome numatytosiomis argumentų reikšmėmis mūsų SCSS rinkinyje – ir taip, šios numatytosios vertės taip pat gali būti susijusios su kitais argumentais.
IŠBANDYK PATS!
http://play.csssecrets.io/bevel-corners-gradients

Išlenkti kirpti kampai

Puikus lenktų kampų naudojimo svetainėje pavyzdys. http://g2geogeske.com dizaineris juos pavertė pagrindiniu dizaino elementu: jie yra navigacijoje, turinyje ir net poraštėje.
Metodo variantas su gradientais leidžia sukurti išlenktus nupjautus kampus – tokį efektą daugelis vadina „vidiniu krašto spinduliu“, nes atrodo kaip apversta suapvalintų kampų versija. Vienintelis skirtumas yra radialinių, o ne linijinių gradientų naudojimas:
fonas: #58a;
fonas: radialinis gradientas (apskritimas viršuje kairėje, skaidrus 15 piks., #58a 0) viršuje kairėje,

radialinis gradientas (apskritimas viršuje dešinėje, skaidrus 15 piks., #58a 0) viršuje dešinėje,

radialinis gradientas (apskritimas apačioje dešinėje, skaidrus 15 piks., #58a 0) apačioje dešinėje,

radial-gradient(apskritimas kairėje apačioje, skaidrus 15px, #58a 0) apačioje kairėje;
fono dydis: 50 % 50 %;
fono kartojimas: nekartoti;

Kaip ir ankstesnėje technikoje, kampo dydį galima reguliuoti pagal spalvų perėjimo ribų padėtį, o miksinas gali padaryti šį kodą tinkamesnį tolesnei priežiūrai.

IŠBANDYK PATS!
http://play.csssecrets.io/scoop-corners

Sprendimas su eilute SVG ir border-image

Nors gradientais pagrįstas sprendimas veikia, jis turi keletą trūkumų:
Kodas labai ilgas ir pilnas pasikartojimo. Dažniausiu atveju, kai reikia apkarpyti visus keturis kampus vienodai, šios sumos pakeitimas reiškia keturis kodo pakeitimus.

Panašiai, norint pakeisti fono spalvą, reikia atlikti keturis pakeitimus, o jei atsižvelgsite į atsarginį sprendimą, tada visus penkis; Animuoti nupjauto kampo dydžio pokyčius yra neįtikėtinai sunku, o kai kuriose naršyklėse tai visiškai neįmanoma. Laimei, priklausomai nuo norimo rezultato, galime naudoti dar porą metodų. Vienas iš jų susijęs su susijungimu kraštinė-vaizdas su eilutės SVG kodu, kuriame generuojami kampai.

Žinant, kaip tai veikia kraštinė-vaizdas(jei prireiks šias žinias atgaivinti atmintyje, rasi užuominą), ar jau įsivaizduoji, kaip turi atrodyti reikalingas? SVG- kodas?

Kadangi bendri matmenys mums nėra svarbūs (apskritimo vaizdas pasirūpins mastelio keitimu, o SVG vaizdų mastelis puikiai tinka nepriklausomai nuo dydžio – būkite palaiminti vektorinė grafika!), visi dydžiai gali būti prilyginami vienam, kad būtų patogiau ir trumpesnėmis reikšmėmis. Nupjauto kampo vertė bus lygi vienetui, o tiesios pusės taip pat bus lygios vienetui. Rezultatas (padidintas, kad būtų lengviau matyti). Tam reikalingas kodas parodytas žemiau:
kraštinė: 15px vientisas skaidrus;


plotis=”3″ aukštis=”3″ fill=”%2358a”>\
\
’);

Atminkite, kad pjaustymo žingsnio dydis yra 1. Tai nereiškia 1 pikselio; tikrasis dydis nustatomas pagal SVG failo koordinačių sistemą (todėl mes neturime vienetų). Jei naudotume procentus, turėtume maždaug 1/3 vaizdo su trupmenine verte, pvz., 33,34 % . Visada rizikinga griebtis apytikslių verčių, nes skirtingos naršyklės Vertės gali būti suapvalintos iki įvairaus tikslumo. Ir laikydamiesi SVG failo koordinačių sistemos pokyčio vienetų, išvengiame galvos skausmo, kuris kyla dėl viso to apvalinimo.

Kaip matote, nupjauti kampai yra, bet nėra fono. Yra du būdai, kaip išspręsti šią problemą: arba apibrėžti foną, arba pridėti užpildymo raktinį žodį į kraštinės vaizdo deklaraciją, kad centrinis pjūvio elementas nebūtų atmestas. Mūsų pavyzdyje verčiau apibrėžti atskirą foną, nes šis apibrėžimas taip pat bus sprendimas naršyklėms, kurios nepalaiko šio sprendimo.

Be to, tikriausiai pastebėjote, kad dabar nupjauti kampai yra mažesni nei naudojant ankstesnę techniką, o tai gali sukelti painiavą. Nustatome rėmelio plotį iki 15 pikselių! Priežastis ta, kad gradiento sprendime šie 15 pikselių buvo išmatuoti palei gradiento liniją, kuri yra statmena gradiento krypčiai. Tačiau rėmo plotis matuojamas ne įstrižai, o horizontaliai/vertikaliai.

Ar jauti, kur aš einu su tuo? Taip, taip, vėl visur paplitusi Pitagoro teorema, kurią mes aktyviai naudojome. Paveikslėlyje pateikta diagrama turėtų būti aiškiau.

Trumpai tariant, norint pasiekti tą patį vizualinį rezultatą, mums reikia kraštinės pločio, kuris būtų 2 kartus didesnis už dydį, kurį naudotume gradiento metodu. IN šiuo atveju tai bus pikselis, kurį protingiausia priartinti prie 20 pikselių, nebent mes susiduriame su užduotimi kuo labiau priartinti įstrižainės dydį prie branginamo 15 pikselių:

border-image: 1 url('data:image/svg+xml,\

plotis=”3″ aukštis=”3″ fill=”%2358a”>\

0,2 colio/>\
’);
fonas: #58a;
Tačiau, kaip matote, rezultatas nėra toks, kokio tikėjomės.

Kur dingo mūsų kruopščiai nupjauti kampai? Nebijok, jaunasis Padawan, kampai vis dar yra vietoje. Iš karto suprasite, kas atsitiko, jei nustatysite kitą fono spalvą, pvz., #655.
Kaip parodyta toliau pateiktame paveikslėlyje, priežastis, kodėl mūsų kampai išnyko, yra dėl fono: aukščiau apibrėžtas fonas juos tiesiog užstoja. Viskas, ką turime padaryti, kad pašalintume šį nepatogumą, tai naudoti fono klipą, kad fonas nepatektų po rėmelio sritimi:
kraštinė: 20px vientisas skaidrus;
border-image: 1 url('data:image/svg+xml,\

plotis=”3″ aukštis=”3″ fill=”%2358a”>\

0,2 colio/>\
’);
fonas: #58a;

Dabar problema išspręsta ir mūsų laukas atrodo lygiai taip pat, kaip ir anksčiau. Be to, šį kartą mes galime lengvai pakeisti kampų dydį tik vienu redagavimu: tiesiog sureguliuokite rėmo plotį. Mes netgi galime animuoti šį efektą, nes kraštinės plotis palaiko animaciją!

O fonui pakeisti dabar reikia dviejų, o ne penkių pakeitimų. Be to, kadangi mūsų fonas nepriklauso nuo kampams taikomo efekto, galime suteikti jam gradientą ar bet kokį kitą raštą, jei tik kraštų spalva yra #58a .

Pavyzdžiui, mes naudojame radialinį gradientą nuo hsla(0,0%,100%,.2) iki skaidraus. Liko išspręsti tik vieną mažą problemą. Jei kraštinės vaizdas nepalaikomas, atsarginis sprendimas neapsiribos nupjautų kampų nebuvimu. Kadangi fonas apkarpytas, tarp lauko krašto ir jo turinio bus mažiau vietos. Kad tai ištaisytume, turime apibrėžti tą pačią rėmelio spalvą, kurią naudojame fonui:
kraštinė: 20px solid #58a;
border-image: 1 url('data:image/svg+xml,\

plotis=”3″ aukštis=”3″ fill=”%2358a”>\
\
’);
fonas: #58a;
background-clip: padding-box;

Naršyklėse, kur mūsų apibrėžimas kraštinė-vaizdas palaikoma, ši spalva bus nepaisoma, bet jei kraštinės vaizdas nepavyks, papildoma kraštinės spalva suteiks elegantiškesnį atsarginį sprendimą. Vienintelis jo trūkumas yra tai, kad jis padidina pakeitimų, reikalingų norint pakeisti fono spalvą, skaičių iki trijų.
IŠBANDYK PATS!
http://play.csssecrets.io/bevel-corners

Apkarpymo tako sprendimas

Nors kraštinės vaizdas yra labai kompaktiškas ir gerai atitinka DRY principus, jis nustato tam tikrus apribojimus. Pavyzdžiui, mūsų fonas vis tiek turėtų būti arba visas, arba bent jau išilgai kraštų, užpildytas vientisa spalva.

Ką daryti, jei norime naudoti kitokio tipo foną, pvz., tekstūrą, raštą ar linijinį gradientą? Yra ir kitas metodas, kuris neturi tokių apribojimų, nors, žinoma, yra tam tikrų jo naudojimo apribojimų.

Prisiminkite turtą klipas iš paslapties „Kaip pasidaryti rombą“? CSS kirpimo takai turi nuostabią savybę: jie leidžia maišyti procentines reikšmes (taip, kaip mes nurodome bendruosius elemento matmenis) su absoliučiomis reikšmėmis, suteikdamos neįtikėtiną lankstumą. Pavyzdžiui, kirpimo kelio, apkarpančio elementą iki 20 pikselių stačiakampio su nuožulniais kampais (matuojant horizontaliai), kodas atrodo taip:
fonas: #58a;
iškarpos kelias: daugiakampis (
20 piks. 0, calc (100 % - 20 pix) 0, 100 % 20 pix,
100 % calc (100 % - 20px), calc (100% - 20px) 100%,
20px 100%, 0 calc(100% - 20px), 0 20px);
Nors ir trumpas, šis kodo fragmentas neatitinka DRY principų, ir tai tampa viena didžiausių problemų, jei nenaudojate išankstinio procesoriaus. Tiesą sakant, šis kodas geriausiai iliustruoja WET principą iš visų šioje knygoje pateiktų grynųjų CSS sprendimų, nes norint pakeisti kampo dydį reikia net aštuonių (!) redagavimo darbų.

Kita vertus, foną galima pakeisti tik vienu redagavimu, taigi bent jau mes tai turime. Vienas iš privalumų šis požiūris- tai, kad galime naudoti absoliučiai bet kokį foną ar net apkarpyti pakaitalų elementus, tokius kaip vaizdai. Iliustracijoje pavaizduotas vaizdas, stilizuotas naudojant nupjautus kampus. Nė vienas iš ankstesnių metodų negali pasiekti tokio efekto. Be to, ypatybė clip-path palaiko animaciją, todėl galime animuoti ne tik kampo dydžio pasikeitimą, bet ir perėjimus tarp skirtingų formų.

Viskas, ką jums reikia padaryti, tai naudoti kitą kirpimo kelią. Šio sprendimo trūkumas yra ne tik išsamus ir ribotas naršyklės palaikymas, bet ir tai, kad jei neužtikrinsime, kad užpildas būtų pakankamai platus, tekstas taip pat bus nukirptas, nes elemento apkarpymas nepaima jokių jo komponentų. atsižvelgti. Priešingai, gradiento metodas leidžia tekstui tiesiog išsiplėsti už nukirptų kampų (juk jie yra tik fono dalis), o rėmelio vaizdo metodas veikia taip pat, kaip ir įprastos kraštinės – jis apvynioja tekstą ant naujo linija.

IŠBANDYK PATS!
http://play.csssecrets.io/bevel-corners-clipped

ATEITIES KAMPAI
Ateityje mums nereikės naudoti CSS gradientų, iškirpimo ar SVG, kad pasiektume nupjautų kampų efektą. Naujas turtas kampo formos,įtraukta į CSS fonai ir sienos 4 lygis , išgelbės mus nuo šio galvos skausmo. Jis bus naudojamas skirtingų formų kampų efektui sukurti kartu su ribinio spindulio savybe, kuri būtina norint nustatyti apkarpymo kiekį. Pavyzdžiui, norint aprašyti 15 pikselių iškirptus kampus visose vaizdo pusėse, pakanka šio paprasto kodo:

kraštinės spindulys: 15 pikselių;
kampo forma: nuožulnus;

Taip pat skaitykite

Vladas Merževičius

Nepaisant to, kad didelės įstrižainės monitoriai tampa vis labiau įperkami ir jų skiriamoji geba nuolat didėja, kartais iškyla užduotis sutalpinti daug teksto ribotoje erdvėje. Pavyzdžiui, to gali prireikti mobilioji versija svetainę arba sąsają, kurioje svarbus eilučių skaičius. Tokiais atvejais prasminga apkarpyti ilgas teksto eilutes, paliekant tik sakinio pradžią. Taip sąsają pateiksime kompaktiška forma ir sumažinsime rodomos informacijos kiekį. Pats eilutės apkarpymas gali būti atliekamas serverio pusėje naudojant tą patį PHP, bet tai lengviau naudojant CSS ir visada galite rodyti visą tekstą, pavyzdžiui, užvedę pelės žymeklį virš jo. Toliau apžvelgsime teksto pjaustymo įsivaizduojamomis žirklėmis būdus.

Tiesą sakant, viskas priklauso nuo perpildymo nuosavybės naudojimo su paslėpta verte. Skirtumai slypi tik skirtingame mūsų teksto pateikime.

Naudojant perpildymą

Kad perpildymo ypatybė pasirodytų su tekstu visa savo šlove, turite išskleisti tekstą naudodami tarpą su reikšme nowrap . Jei tai nebus padaryta, prie teksto nebus pridėti brūkšneliai ir bus rodomas visas tekstas. 1 pavyzdyje parodyta, kaip apkarpyti ilgą tekstą su nurodytu stiliaus ypatybių rinkiniu.

1 pavyzdys. Teksto perpildymas

HTML5 CSS3 IE Cr Op Sa Fx

Šio pavyzdžio rezultatas parodytas fig. 1.

Ryžiai. 1. Teksto išvaizda pritaikius perpildymo savybę

Kaip matyti iš paveikslo, paprastai yra vienas trūkumas – nėra akivaizdu, kad tekstas turi tęsinį, todėl vartotojas turi tai įspėti. Paprastai tai daroma naudojant gradientą arba elipsę.

Gradiento pridėjimas prie teksto

Kad būtų aiškiau, ar tekstas dešinėje nesibaigia, ant jo galite perdengti gradientą nuo skaidrios iki fono spalvos (2 pav.). Tai sukurs laipsniško teksto tirpimo efektą.

Ryžiai. 2. Gradiento tekstas

2 pavyzdyje parodyta, kaip sukurti šį efektą. Paties elemento stilius išliks praktiškai toks pat, tačiau patį gradientą pridėsime naudodami pseudoelementą ::aff ir CSS3. Norėdami tai padaryti, per turinio ypatybę įterpiame tuščią pseudoelementą ir pritaikome jam gradientą su skirtingais pagrindinių naršyklių priešdėliais (2 pavyzdys). Gradiento plotį galima lengvai pakeisti naudojant plotis , taip pat galite reguliuoti skaidrumo laipsnį, pakeisdami reikšmę 0,2 savo.

2 pavyzdys: gradientas virš teksto

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Intradiskretus arpedžas paverčia poliseriją, tai yra vienkartinė vertikalė super polifoniniame audinyje.

Šis metodas neveikia Interneto naršyklė„Explorer“ iki 8.0 versijos imtinai, nes ji nepalaiko gradientų. Tačiau galite atsisakyti CSS3 ir padaryti gradientą senamadišku būdu, naudodami vaizdą PNG-24 formatu.

Šį metodą galima derinti tik su paprastu fonu, o fono paveikslėlio atveju bus pastebimas nuolydis teksto viršuje.

Elipsė teksto pabaigoje

Taip pat galite naudoti elipsę apkirpto teksto pabaigoje vietoj gradiento. Be to, jis bus automatiškai pridėtas naudojant teksto perpildymo ypatybę. Visos naršyklės tai supranta, įskaitant senesnes IE versijas, ir vienintelis šios savybės trūkumas yra tai, kad šiuo metu jos būsena yra neaiški. Atrodo, kad CSS3 apima šią ypatybę, tačiau su juo esantis kodas nepraeina patvirtinimo.

3 pavyzdyje parodytas teksto perpildymo ypatybės naudojimas su reikšme elipsė, kuri prideda elipsę. Užvedus pelės žymeklį ant teksto, jis rodomas visas ir paryškinamas fono spalva.

3 pavyzdys: teksto perpildymo naudojimas

HTML5 CSS3 IE Cr Op Sa Fx

Pasąmonė sukelia kontrastą, kurį Lee Ross įvardija kaip pagrindinę priskyrimo klaidą, kurią galima pastebėti daugelyje eksperimentų.

Šio pavyzdžio rezultatas parodytas fig. 3.

Ryžiai. 3. Tekstas su elipsėmis

Didelis šių metodų pranašumas yra tas, kad gradientas ir elipsės nerodomi, jei tekstas yra trumpas ir visiškai telpa tam tikroje srityje. Taigi tekstas bus rodomas kaip įprasta, kai jis bus visiškai matomas ekrane, o sumažinus elemento plotį bus iškirptas.