Cum se poate irita uneori numele lungi ale patinelor de bunuri - trei linii - sau titluri lungi de alte blocuri. Ar fi grozav dacă ai putea cumva totul priuzhat face compact. Iar atunci când treceți cu mouse-ul deja arată complet din titlu.
Pentru a face acest lucru, vom veni în ajutorul CSS nostru preferat. Este foarte simplu, uita-te.
Să presupunem că avem aici este un bloc din catalog la mărfurile:
Miracle Yudo silopridavatel seara, misterios, art. 20255-59
bunuri minunate, la un super pret, pentru doar 100 de ruble. Luminați serile singuratice, și va val de vitalitate!
Aici este structura sa:
Sunt de acord, se pare groaznic. Desigur, este posibil să se reducă numele produsului. Dar ce se întâmplă dacă există sute sau mii? Este de asemenea posibil prin intermediul unei părți php capitonajul nume, limitat la numărul de caractere. Dar ce se întâmplă dacă, atunci se va schimba aspectul și a blocurilor va fi mai mic, sau invers de 2-3 ori mai mult? Toate acestea nu este o opțiune, toate acestea nu ne convine.
Și aici avem sprijinul CSS și a proprietății volshebloe sale de text-overflow. Dar aceasta trebuie să fie utilizat în mod corespunzător în combinație cu mai multe alte proprietăți. Mai jos vă voi arăta o soluție la cheie, și apoi explica ce este ceea ce.
Deci, împingând editarea deoparte manualul de nume de bunuri și stiluri moi trim, vom lua în mâinile CSS și să vedem ce obținem:
Miracle Yudo silopridavatel seara, misterios, art. 20255-59
bunuri minunate, la un super pret, pentru doar 100 de ruble. Luminați serile singuratice, și va val de vitalitate!
Ei bine, mai bine? În opinia mea, foarte mult! Și adu mouse-ul pentru titlu. Voila! Aici ne arată complet.
Structura nu am schimbat nimic, doar am adaugat o diva cu titlul tag-o clasa .header. Dar noi, stiluri completate:
Uite ce am făcut:
- Am adăugat un bloc de proprietate alb-space: nowrap. care ia departe de capacitatea de a muta textul într-o nouă linie de cuvinte, astfel, trăgându-l în linie;
- Apoi am adaugat proprietatea overflow: ascuns. care a limitat vizibilitatea lățimii bloc a liniilor noastre, astfel reducandu-se pe toate inutile și nu arată vizitatorul său;
- Deci, în final, am adăugat la linia noastră de elipsă folosind proprietatea text-overflow: elipsă. permițând astfel vizitatorul să înțeleagă că acest lucru nu este sfârșitul liniei, și aveți nevoie pentru a aduce, probabil, myschku și a vedea-l complet.
Dragoste CSS, invata CSS, iar saitostroitel'stva nu pare ca un astfel de lucru dificil =)