Puncte Css dacă nu se potrivește. Tăierea textului cu o singură linie sau pe mai multe rânduri la înălțime prin adăugarea unor puncte de suspensie

În unele cazuri, conținutul unui bloc apare în afara granițelor elementului, suprapunându-l. Pentru a controla comportamentul elementelor la nivel de bloc, utilizați proprietatea overflow, care determină modul în care ar trebui să fie afișat conținutul care se extinde în afara blocului.

Folosind proprietatea clip, puteți decupa un element la dimensiunile specificate.

1. Proprietatea overflow

Conținutul elementelor blocului poate depăși un bloc atunci când blocul are o înălțime și/sau lățime explicită. Fără a specifica o înălțime, blocul se va întinde pentru a găzdui conținutul, cu excepția cazului în care blocul este poziționat la poziția: absolută; sau poziție: fixă; . Textul poate depăși blocul în înălțime, imagini - în înălțime și lățime.

2. Proprietatea Overflow-x

Proprietatea specifică modul în care marginea dreaptă a conținutului din interiorul blocului va fi tăiată dacă acesta depășește.

Sintaxă:

Div ( overflow-x: ascuns; )

3. Proprietatea overflow-y

Proprietatea specifică modul în care marginea inferioară a conținutului din interiorul blocului va fi tăiată dacă se depășește.

Sintaxă:

Div (overflow-y: ascuns; )

4. Proprietatea clipului

Proprietatea determină cât de mult din element va fi vizibil. Partea elementului care rămâne vizibilă după tăiere se numește regiunea de tăiere. Decuparea se aplică unui element care este inițial complet vizibil. Proprietatea se aplică elementelor care au proprietatea de poziție setată la absolut sau fix.

Există un text de lungime arbitrară care trebuie afișat într-un bloc de înălțime și lățime fixă. În acest caz, dacă textul nu se potrivește complet, ar trebui afișat un fragment de text care se încadrează complet în blocul dat, după care se setează o elipsă.

Această sarcină este destul de comună, dar în același timp nu este atât de banală pe cât pare.

Opțiune pentru textul cu o singură linie în CSS

În acest caz, puteți utiliza proprietatea text-overflow: elipse. În acest caz, containerul trebuie să aibă proprietatea preaplin egal ascuns sau clip

Bloc ( lățime : 250 px ; spațiu alb : nowrap ; overflow : ascuns ; text-overflow : elipse ; )

Opțiune pentru text cu mai multe linii în CSS

Prima modalitate de a tăia textul cu mai multe linii este utilizarea Proprietăți CSS aplica pseudo elemente :înainteŞi :după. Să începem cu marcajul HTML

Și acum proprietățile în sine

Casetă ( overflow : ascuns ; înălțime : 200 px ; lățime : 300 px ; line-height : 25 px ; ) .box :before ( conținut : „” ; float : stânga ; lățime : 5 px ; înălțime : 200 px ; ) .box > * :first -child ( float : dreapta ; lățime : 100 % ; margin-left : -5px ; ) .box :after ( conținut : „\02026” ; box-sizing : content-box ; float : dreapta ; poziție : relativ ; sus : -25px ; lățime: 3em ;

O altă modalitate este să folosim proprietatea column-width, cu care setăm lățimea coloanei pentru textul cu mai multe linii. Cu toate acestea, atunci când utilizați această metodă, nu va fi posibil să setați o elipsă la sfârșit. HTML:

Bloc ( overflow : ascuns ; înălțime : 200 px ; lățime : 300 px ; ) .block__inner ( -webkit-column-width : 150px ; -moz-column-width : 150px ; coloană lățime : 150px ; înălțime : 100% ; )

Există o a treia modalitate de a rezolva textul cu mai multe linii folosind CSS pentru browsere Webkit. În el va trebui să folosim câteva proprietăți specifice cu prefixul -webkit. Principalul este -webkit-line-clamp care vă permite să specificați numărul de linii care urmează să fie scoase într-un bloc. Soluția este frumoasă, dar destul de limitată datorită funcționării sale într-un grup limitat de browsere

Bloc ( overflow : ascuns ; text-overflow : puncte de suspensie ; display : -webkit-box ; -webkit-line-clamp : 2 ; -webkit-box-orient : vertical ; )

Opțiune pentru text cu mai multe linii în JavaScript

Aici este folosit un bloc suplimentar invizibil, în care textul nostru este plasat inițial, după care este eliminat câte un caracter până când înălțimea acestui bloc devine mai mică sau egală cu înălțimea. blocul dorit. Iar la sfârșit textul este mutat în blocul original.

var block = document. querySelector(".block"), text = bloc. innerHTML, clona = document. createElement("div");

clonare stil. poziție = „absolut” ;

(funcție ($) ( var truncate = funcție (el ) ( var text = el . text (), înălțime = el . înălțime (), clone = el . clone (); clone . css (( poziție: „absolut” , vizibilitate: „ascuns” , înălțime: „auto” )); ( clone . text ( text . subșir ( 0 , l ) + „...” ); el . text ( clone . elimina ( ) ); ( return this . fiecare (funcție () ( trunchiare ( $ ( acest )); ) )( jQuery ));

Problemă

Tăierea colțurilor nu este doar despre cale rapidă atinge scopul, dar și o opțiune de stil populară atât în ​​tipărire, cât și în web design. Cel mai adesea implică tăierea unuia sau mai multor colțuri ale recipientului la un unghi de 45°. ÎN în ultima vreme, datorită faptului că skeuomorfismul a început să piardă teren în fața designului plat, acest efect este deosebit de popular. Când colțurile sunt tăiate doar pe o singură parte și fiecare colț ocupă 50% din înălțimea elementului, se creează o formă în formă de săgeată, care este adesea folosită și în proiectarea butoanelor și a elementelor de navigare pe firul de navigare.

Cu toate acestea, CSS încă nu are suficiente instrumente pentru a crea acest efect cu linii simple și directe. Din acest motiv, mulți dezvoltatori tind să folosească imagini de fundal: fie acoperiți colțurile tăiate cu triunghiuri (pe un fundal cu o singură culoare), fie creați întregul fundal folosind una sau mai multe imagini în care colțurile sunt deja tăiate. Evident, astfel de metode sunt complet inflexibile, greu de întreținut și cresc latența din cauza solicitărilor HTTP suplimentare și a dimensiunii totale a fișierelor site-ului.

Un exemplu de site web în care colțul tăiat (jos din stânga câmpului semi-transparent Find & Book) se potrivește perfect în design

Soluţie

Unul solutie posibila oferă-ne atotputernicii gradienți CSS. Să presupunem că vrem doar un colț tăiat, să spunem colțul din dreapta jos. Trucul este să profitați de capacitatea degradeurilor de a lua direcția unghiului (de exemplu, 45deg) și poziția limitelor de tranziție a culorii în valori absolute, care nu se schimbă atunci când dimensiunile totale ale elementului la care este fundalul aparține schimbării. Din cele de mai sus rezultă că un gradient liniar ne va fi suficient.

Vom adăuga un chenar de estompare transparent pentru a crea colțul tăiat și un alt chenar de estompare în aceeași poziție, dar cu o culoare care se potrivește cu fundalul. Codul CSS va fi după cum urmează (pentru un colț de 15 pixeli):

fundal: #58a;
fundal:linear-gradient(-45deg, transparent 15px, #58a 0);

Simplu, nu-i așa? Rezultatul îl puteți vedea în figură.

Din punct de vedere tehnic, nici măcar nu avem nevoie de primul anunț. L-am adăugat doar ca o soluție: dacă gradienții CSS nu sunt acceptați, atunci a doua declarație va fi ignorată, așa că vom obține cel puțin un fundal de culoare solidă. Acum să presupunem că avem nevoie de două colțuri tăiate, să spunem ambele colțuri de jos. Acest lucru nu se poate face cu un singur gradient, așa că vom avea nevoie de două. Primul tău gând ar putea fi ceva de genul acesta:

fundal: #58a;
fundal: liniar-gradient(-45deg, transparent 15px, #58a 0), linear-gradient(45deg, transparent 15px, #655 0);

Cu toate acestea, acest lucru nu funcționează. În mod implicit, ambele degrade ocupă întreaga zonă a elementului, astfel încât se întunecă reciproc. Trebuie să le facem mai mici limitând fiecare dintre ele la jumătate din element folosind dimensiunea fundalului:
fundal: #58a;

dimensiunea fundalului: 50% 100%;

Rezultatul îl puteți vedea în figură.

Chiar dacă am aplicat dimensiunea fundalului, gradienții încă se suprapun unul pe celălalt. Motivul este că am uitat să dezactivăm repetarea fundalului, astfel încât fiecare fundal se repetă de două ori. În consecință, unul dintre fundaluri îl întunecă încă pe celălalt, dar de data aceasta prin repetare. Versiune nouă codul arata cam asa:
fundal: #58a;
fundal: liniar-gradient(-45deg, transparent 15px, #58a 0) dreapta, linear-gradient(45deg, transparent 15px, #655 0) stânga;
dimensiunea fundalului: 50% 100%;

Puteți vedea rezultatul în imagine și vă asigurați că în sfârșit este acolo! - funcționează! Probabil ați ghicit deja cum să aplicați acest efect în toate cele patru colțuri. Veți avea nevoie de patru gradienți și cod similar cu următorul:

fundal: #58a;
fundal: gradient liniar (135deg, transparent 15px, #58a 0) stânga sus,

gradient liniar (-135deg, transparent 15px, #655 0) dreapta sus,

gradient liniar (-45deg, transparent 15px, #58a 0) dreapta jos,

gradient liniar (45deg, transparent 15px, #655 0) stânga jos;
dimensiunea fundalului: 50% 50%;
background-repeat: fără repetare;

SFATURI
Am folosit culori diferite (#58a și #655) pentru a face depanarea mai ușoară. În practică, ambele degrade vor fi de aceeași culoare.
Dar problema cu codul anterior este că este greu de întreținut. Este nevoie de cinci editări pentru a schimba culoarea de fundal și patru pentru a schimba valoarea unghiului. Un mixin creat folosind un preprocesor ar putea reduce numărul de repetări. Iată cum ar arăta acest cod în SCSS:
SCSS
@mixin colțuri teșite($bg,
$tl:0, $tr:$tl, $br:$tl, $bl:$tr) (
fundal: $bg;
fundal:
gradient-liniar (135deg, transparent $tl, $bg 0)
stânga sus,
gradient-liniar(225deg, transparent $tr, $bg 0)
dreapta sus,
gradient-liniar(-45deg, transparent $br, $bg 0)
dreapta jos,
gradient-liniar(45deg, transparent $bl, $bg 0)
stânga jos;
dimensiunea fundalului: 50% 50%;
background-repeat: fără repetare;
}

Poate fi apelat atunci când este necesar, așa cum se arată mai jos, cu 2-5 argumente:
SCSS
@include colțuri teșite (#58a, 15px, 5px);
În acest exemplu, vom ajunge cu un element care are colțurile din stânga sus și din dreapta jos tăiate cu 15 pixeli și colțurile din dreapta sus și din stânga jos tăiate cu 5 pixeli, similar cu modul în care funcționează raza chenarului când specificăm mai puțin de patru valori. Acest lucru este posibil deoarece ne-am ocupat și de valorile implicite pentru argumentele din mixul nostru SCSS - și da, acele valori implicite se pot referi și la alte argumente.
ÎNCERCAȚI VOI!
http://play.csssecrets.io/bevel-corners-gradients

Colțuri tăiate curbat

Un exemplu excelent de utilizare a colțurilor tăiate curbe pe un site web. http://g2geogeske.com designerul le-a făcut un element central de design: sunt prezente în navigare, în conținut și chiar în subsol.
O variație a metodei cu degrade vă permite să creați colțuri tăiate curbe - un efect pe care mulți îl numesc „raza de bordură interioară” deoarece arată ca o versiune inversată a colțurilor rotunjite. Singura diferență este utilizarea gradienților radiali în loc de cei liniari:
fundal: #58a;
fundal: gradient radial (cerc în stânga sus, transparent 15px, #58a 0) stânga sus,

gradient radial (cerc în dreapta sus, transparent 15px, #58a 0) dreapta sus,

gradient radial (cerc în dreapta jos, transparent 15px, #58a 0) dreapta jos,

radial-gradient(cerc în stânga jos, transparent 15px, #58a 0) stânga jos;
dimensiunea fundalului: 50% 50%;
background-repeat: fără repetare;

Ca și în tehnica anterioară, dimensiunea unghiului poate fi controlată de pozițiile limitelor de tranziție a culorii, iar un mixin poate face acest cod mai potrivit pentru întreținerea ulterioară.

ÎNCERCAȚI VOI!
http://play.csssecrets.io/scoop-corners

Soluție cu șir SVG și imagine-chenar

În timp ce soluția bazată pe gradienți funcționează, are câteva dezavantaje:
Codul este foarte lung și plin de repetare. În cel mai obișnuit caz, când trebuie să tăiem toate cele patru colțuri cu aceeași cantitate, modificarea acestei valori implică patru modificări ale codului.

La fel, schimbarea culorii de fundal necesită și patru modificări, iar dacă țineți cont de soluția de rezervă, atunci toate cele cinci; Animarea modificărilor în dimensiunea unui colț tăiat este incredibil de dificilă, iar în unele browsere este complet imposibil. Din fericire, în funcție de rezultatul dorit, mai putem folosi câteva metode. Una dintre ele implică unificarea chenar-imagine cu un șir de cod SVG în care sunt generate colțurile.

Știind cum funcționează chenar-imagine(dacă aveți nevoie să reîmprospătați aceste cunoștințe în memorie, veți găsi un indiciu), vă puteți imagina deja cum ar trebui să arate cea necesară? SVG-cod?

Deoarece dimensiunile generale nu sunt importante pentru noi (imaginea de margine se va ocupa de scalare, iar imaginile SVG sunt scalate perfect indiferent de dimensiuni - fii binecuvântat grafica vectoriala!), toate dimensiunile pot fi echivalate cu unitatea pentru a opera cu valori mai convenabile și mai scurte. Valoarea colțului tăiat va fi egală cu unu, iar laturile drepte vor fi, de asemenea, egale cu unu. Rezultatul (mărit pentru ușurință de percepție). Codul necesar pentru aceasta este prezentat mai jos:
chenar: 15px solid transparent;


lățime=”3″ înălțime=”3″ umplere=”%2358a”>\
\
’);

Rețineți că dimensiunea pasului de feliere este 1. Aceasta nu înseamnă 1 pixel; dimensiunea reală este determinată de sistemul de coordonate al fișierului SVG (de aceea nu avem unități). Dacă am folosi procente, ar trebui să aproximăm 1/3 din imagine cu o valoare fracțională, ca 33,34% . Este întotdeauna riscant să apelezi la valori aproximative, întrucât browsere diferite Valorile pot fi rotunjite la diferite grade de precizie. Și respectând unitățile de modificare din sistemul de coordonate al fișierului SVG, ne ferim de durerea de cap care vine cu toată această rotunjire.

După cum puteți vedea, colțurile tăiate sunt prezente, dar nu există fundal. Există două modalități de a rezolva această problemă: fie definiți un fundal, fie adăugați cuvântul cheie de umplere la declarația de margine a imaginii, astfel încât elementul de felie centrală să nu fie aruncat. În exemplul nostru, preferăm să definim un fundal separat, deoarece această definiție va servi și ca o soluție pentru browserele care nu acceptă această soluție.

În plus, probabil ați observat că colțurile tăiate sunt acum mai mici decât la tehnica anterioară, ceea ce poate fi confuz. Am stabilit lățimea cadrului la 15px! Motivul este că în soluția de gradient, acești 15 pixeli au fost măsurați de-a lungul liniei de gradient, care este perpendiculară pe direcția gradientului. Cu toate acestea, lățimea cadrului nu se măsoară în diagonală, ci pe orizontală/verticală.

Simți unde merg cu asta? Da, da, din nou omniprezenta teorema lui Pitagora, pe care am folosit-o în mod activ. Diagrama din figură ar trebui să clarifice lucrurile.

Pe scurt, pentru a obține același rezultat vizual, avem nevoie de o lățime a chenarului care să fie de 2 ori dimensiunea pe care am folosi-o în metoda gradientului. ÎN în acest caz, acesta va fi un pixel, care este cel mai bine aproximat la 20px, cu excepția cazului în care ne confruntăm cu sarcina de a aduce dimensiunea diagonalei cât mai aproape posibil de prețuiții 15px:

imagine-chenar: 1 url(‘data:image/svg+xml,\

lățime=”3″ înălțime=”3″ umplere=”%2358a”>\

0,2″/>\
’);
fundal: #58a;
Cu toate acestea, după cum puteți vedea, rezultatul nu este exact ceea ce ne așteptam.

Unde s-au dus colțurile noastre tăiate cu grijă? Nu-ți fie teamă, tinere Padawan, colțurile sunt încă la locul lor. Veți înțelege imediat ce s-a întâmplat dacă setați o culoare de fundal diferită, cum ar fi #655.
După cum demonstrează imaginea de mai jos, motivul pentru care colțurile noastre au dispărut este din cauza fundalului: fundalul pe care l-am definit mai sus le ascunde pur și simplu. Tot ce trebuie să facem pentru a elimina acest inconvenient este să folosim background-clip pentru a preveni strecurarea fundalului sub zona cadrului:
chenar: 20px solid transparent;
imagine-chenar: 1 url(‘data:image/svg+xml,\

lățime=”3″ înălțime=”3″ umplere=”%2358a”>\

0,2″/>\
’);
fundal: #58a;

Acum problema este rezolvată și domeniul nostru arată exact la fel ca înainte. În plus, de data aceasta putem schimba cu ușurință dimensiunea colțurilor cu o singură editare: pur și simplu reglați lățimea cadrului. Putem chiar anima acest efect, deoarece lățimea chenarului acceptă animația!

Și schimbarea fundalului necesită acum două editări în loc de cinci. În plus, deoarece fundalul nostru nu depinde de efectul aplicat colțurilor, putem defini un gradient sau orice alt model pentru acesta, cu condiția ca culoarea de la margini să fie încă #58a .

De exemplu, folosim un gradient radial de la hsla(0,0%,100%,.2) la transparent. Mai rămâne o singură mică problemă de rezolvat. Dacă imaginea de margine nu este acceptată, atunci soluția de rezervă nu se va limita la absența colțurilor tăiate. Deoarece fundalul este decupat, va exista mai puțin spațiu între marginea câmpului și conținutul acestuia. Pentru a remedia acest lucru, trebuie să definim aceeași culoare pentru cadru pe care o folosim pentru fundal:
chenar: 20px solid #58a;
imagine-chenar: 1 url(‘data:image/svg+xml,\

lățime=”3″ înălțime=”3″ umplere=”%2358a”>\
\
’);
fundal: #58a;
fundal-clip: padding-box;

În browsere unde definiția noastră chenar-imagine este acceptată, această culoare va fi ignorată, dar în cazul în care imaginea de bord eșuează, o culoare suplimentară a chenarului va oferi o soluție de rezervă mai elegantă. Singurul său dezavantaj este că crește numărul de editări necesare pentru a schimba culoarea de fundal la trei.
ÎNCERCAȚI VOI!
http://play.csssecrets.io/bevel-corners

Soluție pentru calea de tăiere

Deși soluția pentru imagine de frontieră este foarte compactă și urmează bine principiile DRY, impune anumite limitări. De exemplu, fundalul nostru ar trebui să fie în întregime, sau cel puțin de-a lungul marginilor, umplut cu o culoare solidă.

Ce se întâmplă dacă dorim să folosim un alt tip de fundal, cum ar fi o textură, un model sau un gradient liniar? Există o altă metodă care nu are astfel de restricții, deși, desigur, există anumite restricții privind utilizarea sa.

Amintiți-vă de proprietate clip-path din secretul „Cum să faci un romb”? Traseele de tăiere CSS au o proprietate uimitoare: vă permit să amestecați valori procentuale (modul în care specificăm dimensiunile generale ale unui element) cu valori absolute, oferind o flexibilitate incredibilă. De exemplu, codul pentru o cale de tăiere care decupează un element într-un dreptunghi de 20 px cu colțuri teșite (măsurate orizontal) arată astfel:
fundal: #58a;
clip-path: poligon(
20px 0, calc(100% - 20px) 0, 100% 20px,
100% calc(100% - 20px), calc(100% - 20px) 100%,
20px 100%, 0 calc(100% - 20px), 0 20px);
Deși scurt, această bucată de cod nu urmează principiile DRY și aceasta devine una dintre cele mai mari probleme dacă nu utilizați un preprocesor. De fapt, acest cod este cea mai bună ilustrare a principiului WET al tuturor soluțiilor CSS pure prezentate în această carte, deoarece necesită până la opt (!) editări pentru a schimba dimensiunea colțului.

Pe de altă parte, fundalul poate fi schimbat cu o singură editare, așa că cel puțin avem asta. Unul dintre avantaje această abordare- faptul că putem folosi absolut orice fundal sau chiar decupăm elemente de înlocuire precum imaginile. Ilustrația arată o imagine stilizată folosind colțuri tăiate. Niciuna dintre metodele anterioare nu poate obține acest efect. În plus, proprietatea clip-path acceptă animația și putem anima nu numai modificarea dimensiunii unui colț, ci și tranzițiile între diferite forme.

Tot ce trebuie să faceți este să utilizați o altă cale de tăiere. Pe lângă faptul că este verbos și are suport limitat pentru browser, dezavantajul acestei soluții este că, dacă nu ne asigurăm că umplutura este suficient de largă, textul va fi, de asemenea, tăiat, deoarece decuparea elementului nu ia niciuna dintre componentele sale. în considerare. În schimb, metoda gradientului permite textului să se extindă pur și simplu dincolo de colțurile tăiate (la urma urmei, ele sunt doar o parte din fundal), iar metoda imagine-chenar funcționează la fel ca și chenarele obișnuite - înfășoară textul pe un nou linia.

ÎNCERCAȚI VOI!
http://play.csssecrets.io/bevel-corners-clipped

COLTURI TAIATE IN VIITOR
În viitor, nu va trebui să recurgem la gradienți CSS, tăiere sau SVG pentru a obține efectul colțurilor tăiate. Proprietate nouă formă de colț, incluse în Fundaluri și margini CSS Nivelul 4 , ne va salva de această durere de cap. Acesta va fi folosit pentru a crea efectul colțurilor tăiate în diferite forme în combinație cu proprietatea rază de frontieră, care este necesară pentru a determina cantitatea de tăiere. De exemplu, pentru a descrie colțuri tăiate de 15 pixeli pe toate părțile unei imagini, următorul cod simplu este suficient:

chenar-rază: 15px;
formă de colț: teșit;

Citește și tu

Vlad Merjevici

În ciuda faptului că monitoarele cu diagonală mare devin din ce în ce mai accesibile și rezoluția lor crește constant, uneori apare sarcina de a încadra mult text într-un spațiu limitat. De exemplu, acest lucru poate fi necesar pentru versiunea mobilă site sau pentru o interfață în care numărul de linii este important. În astfel de cazuri, este logic să tăiați rândurile lungi de text, lăsând doar începutul propoziției. Astfel vom aduce interfața într-o formă compactă și vom reduce cantitatea de informații afișate. Tăierea liniei în sine se poate face pe partea serverului folosind același PHP, dar este mai ușor prin CSS și puteți afișa întotdeauna întregul text, de exemplu, când treceți cursorul mouse-ului peste el. În continuare, ne vom uita la metodele de tăiere a textului cu foarfece imaginare.

În realitate, totul se reduce la utilizarea proprietății overflow cu valoarea ascunsă . Diferențele constau doar în afișarea diferită a textului nostru.

Folosind overflow

Pentru ca proprietatea de overflow să se arate cu text în toată splendoarea sa, trebuie să desfaceți textul folosind spații albe cu valoarea nowrap . Dacă acest lucru nu se face, atunci efectul de care avem nevoie nu se va adăuga cratime la text și va fi afișat întregul text. Exemplul 1 arată cum să tăiați textul lung cu un set specificat de proprietăți de stil.

Exemplul 1. overflow pentru text

HTML5 CSS3 IE Cr Op Sa Fx

Rezultatul acestui exemplu este prezentat în Fig. 1.

Orez. 1. Aspectul textului după aplicarea proprietății overflow

După cum se poate observa din figură, există în general un dezavantaj - nu este evident că textul are o continuare, așa că utilizatorul trebuie să fie conștient de acest lucru. Acest lucru se face de obicei folosind un gradient sau elipse.

Adăugarea unui gradient la text

Pentru a fi mai clar că textul din dreapta nu se termină, puteți suprapune un gradient de la o culoare transparentă la culoarea de fundal deasupra acestuia (Fig. 2). Acest lucru va crea efectul unei dizolvari treptate a textului.

Orez. 2. Text în degrade

Exemplul 2 arată cum să creați acest efect. Stilul elementului în sine va rămâne practic același, dar vom adăuga gradientul în sine folosind pseudo-elementul ::after și CSS3. Pentru a face acest lucru, inserăm un pseudo-element gol prin proprietatea conținut și îi aplicăm un gradient cu prefixe diferite pentru browserele majore (exemplul 2). Lățimea gradientului poate fi modificată cu ușurință folosind lățimea , de asemenea, puteți ajusta gradul de transparență prin înlocuirea valorii 0,2 cu a dvs.

Exemplul 2: Gradient peste text

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Un arpegiu intra-discret transformă o poliserie, aceasta este o verticală unică într-o țesătură super polifonică.

Această metodă nu funcționează în browser de internet Explorer până la versiunea 8.0 inclusiv, deoarece nu acceptă gradienți. Dar puteți abandona CSS3 și faceți un gradient la modă veche, printr-o imagine în format PNG-24.

Această metodă poate fi combinată doar cu un fundal simplu, iar în cazul unei imagini de fundal, gradientul de deasupra textului va fi vizibil.

Puncte de suspensie la sfârșitul textului

De asemenea, puteți utiliza o elipsă la sfârșitul textului decupat în loc de un gradient. Mai mult, va fi adăugat automat folosind proprietatea text-overflow. Toate browserele îl înțeleg, inclusiv versiunile mai vechi de IE, iar singurul dezavantaj al acestei proprietăți este că starea ei este în prezent neclară. CSS3 pare să includă această proprietate, dar codul cu ea nu trece validarea.

Exemplul 3 arată utilizarea proprietății text-overflow cu valoarea elipsei, care adaugă o elipsă. Când treceți mouse-ul peste text, acesta este afișat în întregime și evidențiat într-o culoare de fundal.

Exemplul 3: Utilizarea text-overflow

HTML5 CSS3 IE Cr Op Sa Fx

Inconștientul produce un contrast, acesta este referit de către Lee Ross drept eroarea fundamentală de atribuire, care poate fi văzută în multe experimente.

Rezultatul acestui exemplu este prezentat în Fig. 3.

Orez. 3. Text cu puncte de suspensie

Marele avantaj al acestor metode este că gradientul și elipsele nu sunt afișate dacă textul este scurt și se încadrează în întregime într-o zonă dată. Deci textul va fi afișat ca de obicei atunci când este complet vizibil pe ecran și va fi tăiat atunci când lățimea elementului este redusă.