Mulți oameni s-au confruntat probabil cu o problemă atunci când un text trebuie afișat pe un singur rând. În acest caz, textul poate fi foarte lung, iar lățimea blocului în care se află acest text este de obicei limitată, cel puțin de aceeași dimensiune a ferestrei browserului. Pentru aceste cazuri, a fost inventată proprietatea text-overflow, care a fost inclusă în recomandarea CSS3 și a fost implementată pentru prima dată în IE6, cu mult timp în urmă. Dacă această proprietate este utilizată pentru un bloc, dacă textul său este mai larg decât blocul în sine, atunci textul este tăiat și o elipsă este adăugată la sfârșit. Deși nu totul este atât de simplu aici, vom reveni la asta puțin mai târziu.
Cu Internet Explorer "totul este clar, ce se întâmplă cu alte browsere? Și, deși proprietatea de depășire a textului este în prezent exclusă din specificația CSS3, Safari o acceptă (cel puțin în versiunea 3), și Opera o face (din 9 versiunea, deși proprietatea se numește -o-overflow-text). Dar Firefox nu, nu acceptă și chiar și în versiunea 3. Din păcate, dar adevărat. Dar puteți face ceva?
Desigur, o poți face. Când am căutat pe internet această proprietate și, la fel ca în cazul Firefox, am dat peste o soluție simplă. Esența soluției:
Asta e tot. Citiți detaliile din articol.
Soluția nu este rea, dar există probleme:
- Textul poate fi tăiat în mijlocul (relativ vorbind) al scrisorii și vom vedea „butucul” acesteia.
- Elipsa este afișată întotdeauna, chiar și atunci când textul este mai mic decât lățimea blocului (adică nu cade din el și elipsa nu este necesară).
Primul pas
În primul rând, să ne concentrăm asupra celui de-al doilea număr, care este cum să evităm afișarea elipselor atunci când nu este necesar. După ce mi-am rupt capul și am experimentat „puțin”, am găsit o soluție. Voi încerca să explic.
Concluzia este că avem nevoie de un bloc separat cu puncte de suspensie, care va apărea numai atunci când textul ocupă prea mult spațiu în lățime. Apoi mi-a venit ideea unui bloc plutitor. Deși sună înfricoșător, înseamnă doar un bloc, care este întotdeauna acolo și este apăsat spre dreapta, dar când lățimea textului devine mare, textul împinge blocul pe linia următoare.
Să trecem la practică, altfel este greu de explicat. Să setăm structura HTML:
text foarte lung
Nu foarte compact, dar nu puteam face nimic mai puțin. Deci, avem un bloc container DIV.ellipsis, un bloc cu textul nostru și un alt bloc care va conține o elipsă. Rețineți că „blocul cu puncte de suspensie” este de fapt gol, deoarece nu avem nevoie de cele trei puncte suplimentare atunci când copiem textul. De asemenea, nu vă lăsați intimidați de lipsa unor clase suplimentare, deoarece această structură este bine abordată prin intermediul selectorilor CSS. Și iată CSS în sine:
.ellipsis (overflow: hidden; white-space: nowrap; line-height: 1.2em; height: 1.2em; border: 1px solid red;) .ellipsis\u003e DIV: first-child (float: left;) .ellipsis\u003e DIV + DIV (float: dreapta; marginea-sus: -1.2em;) .ellipsis\u003e
Asta e tot. Verificăm și ne asigurăm că în Firefox, Opera, Safari funcționează conform intenției. În IE, rezultatul este foarte ciudat, dar previzibil. În IE6 totul a mers prost și în IE7 pur și simplu nu funcționează, deoarece nu acceptă conținutul generat. Dar vom reveni la IE mai târziu.
Între timp, să analizăm ce s-a făcut. Mai întâi, setăm înălțimea liniei și înălțimea casetei principale, deoarece trebuie să cunoaștem înălțimea casetei și înălțimea liniei de text. Am stabilit aceeași valoare pentru marginea de sus a blocului de puncte de suspensie, dar cu o valoare negativă. Astfel, atunci când blocul nu este „scăzut” pe linia următoare, acesta va fi deasupra liniei de text (cu o linie), când va fi resetat, va fi la nivelul său (de fapt, este mai jos, întindem doar o linie în sus). Pentru a ascunde inutilul, mai ales atunci când nu este nevoie să afișăm elipsa, facem overflow: ascuns pentru blocul principal, deci atunci când elipsa este deasupra liniei, nu va fi afișată. Acest lucru ne permite, de asemenea, să eliminăm textul care cade în afara blocului (la marginea din dreapta). Pentru a împiedica textul să împacheteze brusc și să împingă blocul cu elipsele din ce în ce mai jos, facem spațiu alb: nowrap, prevenind astfel cratimarea - textul nostru va fi întotdeauna pe o linie. Pentru blocul cu text, setăm float: left, astfel încât să nu colapseze imediat blocul cu puncte de suspensie și să ocupe lățimea minimă. Deoarece ambele blocuri plutesc în interiorul blocului principal (DIV.ellipsis) (float: stânga / dreapta), blocul principal se va prăbuși atunci când blocul cu textul este gol, așa că stabilim o înălțime fixă \u200b\u200bpentru blocul principal (înălțime: 1.2em). În cele din urmă, folosim pseudo-elementul :: after pentru a afișa elipsa. Pentru acest pseudo-element, am stabilit și un fundal pentru a suprapune textul care va fi sub el. Am setat un cadru pentru blocul principal, doar pentru a vedea dimensiunile blocului, îl vom elimina mai târziu.
Dacă Firefox a acceptat pseudo-elemente, precum și Opera și Safari în ceea ce privește poziționarea lor (setarea poziției / float etc. pentru ele), atunci ar fi posibil să nu se utilizeze un bloc separat pentru elipsa. Încercați să înlocuiți ultimele 3 reguli cu următoarele:
.ellipsis\u003e DIV: first-child :: after (float: dreapta; conținut: "..."; margin-top: -1.2em; fundal-culoare: alb; poziție: relativă;)
în Opera și Safari, totul funcționează ca înainte, fără blocul de elipsă suplimentar. Firefox este dezamăgitor. Dar luăm o decizie pentru el. Ei bine - trebuie să vă mulțumiți cu structura HTML originală.
Pasul doi
După cum probabil ați observat, am scăpat de problema elipselor care apar atunci când textul se încadrează în bloc. Cu toate acestea, mai avem încă o problemă - textul este tăiat în mijlocul literelor. Și, în plus, nu funcționează în IE. Pentru a le depăși pe ambele, trebuie să utilizați regula nativă de depășire a textului pentru browsere și numai pentru Firefox utilizați soluția descrisă mai sus (nu există nicio alternativă). Vom afla cum să facem soluția „numai pentru Firefox” mai târziu, dar acum să încercăm să obținem ce funcționează folosind text-overflow. Să modificăm CSS:
.elipsă (revărsare: ascuns; spațiu alb: nowrap; înălțime linie: 1.2em; înălțime: 1.2em; margine: 1px roșu continuu; text-overflow: elipsă; -o-text-overflow: elipsă; lățime: 100%; } .ellipsis * (display: inline;) / * .ellipsis\u003e DIV: first-child (float: left;) .ellipsis\u003e DIV + DIV (float: right; margin-top: -1.2em;) .ellipsis\u003e DIV + DIV :: after (background-color: white; conținut: „...”;) */
Se pare că nu există prea multe de editat. Trei linii au fost adăugate stilului blocului principal. Două dintre ele includ text-overflow. Setarea lățimii: 100% este necesar pentru IE, astfel încât textul să nu extindă blocul la infinit și să funcționeze proprietatea de depășire a textului; de fapt, am limitat lățimea. În teorie, DIV, ca toate elementele de bloc, se întinde pe toată lățimea containerului și lățimea: 100% este inutilă și chiar dăunătoare, dar IE are o problemă de aspect, deoarece containerul este întins întotdeauna pentru a se potrivi conținutului, deci nu există altă cale. De asemenea, am pus toate elementele interne în linie, deoarece pentru unele browsere (Safari și Opera) textul nu va funcționa altfel, deoarece există elemente de bloc în interior. Am comentat ultimele trei reguli, deoarece în acest caz nu sunt necesare și totul se rupe (conflicte). Aceste reguli vor fi necesare numai pentru Firefox.
Să vedem ce s-a întâmplat și să continuăm.
Pasul trei
Când m-am uitat din nou la pagină (înainte să scriu acest articol), menționată chiar la început, atunci, de dragul interesului, am trecut cu vederea comentariile, pentru idei inteligente legate de acestea. Și am găsit, într-un comentariu, unde s-a spus despre o altă soluție care funcționează în Firefox și IE (pentru această persoană, ca și pentru autorul primului articol, alte browsere aparent nu există). Deci, în această soluție, autorul se luptă oarecum diferit cu acest fenomen (lipsa de text-overflow), agățând handlerele de evenimentele de overflow și underflow de elemente pentru care era necesar să punem o elipsă dacă este necesar. Nu e rău, dar mi se pare că această soluție este foarte costisitoare (în ceea ce privește resursele), mai ales că este oarecum subtilă pentru el. Cu toate acestea, aflând cum a reușit acest lucru, a dat peste un lucru interesant, și anume proprietatea CSS -moz-obligatorie. După cum înțeleg, acesta este un analog al comportamentului în IE, doar cu un sos diferit și mai brusc. Dar să nu intrăm în detalii, să spunem doar că în acest fel puteți agăța un handler JavaScript pe un element folosind CSS. Sună ciudat, dar funcționează. Ce facem:
.ellipsis (overflow: ascuns; white-space: nowrap; line-height: 1.2em; height: 1.2em; border: 1px roșu continuu; text-overflow: elipsă; -o-text-overflow: elipsă; lățime: 100% ; -moz-obligatoriu: url (moz_fix.xml # elipsă); zoom: 1; ) .ellipsis * (display: inline;) .moz-elipsă\u003e DIV: primul copil (plutește la stânga; display: bloc; } .moz-elipsă\u003e DIV + DIV (float: dreapta; marginea-sus: -1.2em; display: bloc; } .moz-elipsă\u003e DIV + DIV :: după (fundal-culoare: alb; conținut: "...";)
După cum puteți vedea, nu am mai făcut multe modificări. La acest pas din IE7, există o eroare ciudată, totul este înclinat dacă nu setați zoom: 1 pentru unitatea principală (cea mai simplă opțiune). Dacă eliminați (ștergeți, comentați) regula .ellipsis * sau .moz-ellipsis\u003e regula DIV + DIV (care nu se aplică deloc IE7), eroarea dispare. Toate acestea sunt ciudate, dacă cineva știe care este problema, anunțați-mă. Deocamdată, să trecem cu zoom: 1 și să trecem la Firefox.
Proprietatea -moz-binding conectează fișierul moz_fix.xml la instrucțiune cu elipsa identificatorului. Conținutul acestui fișier XML este după cum urmează:
Tot acest constructor face este să adauge clasa moz-ellipsis la elementul pentru care a fost declanșat selectorul. Acest lucru va funcționa numai în Firefox (browserele gecko?), Deci numai în Firefox se va adăuga clasa moz-ellipsis la elemente și putem adăuga reguli suplimentare pentru această clasă. Ceea ce și-au dorit. Nu sunt pe deplin sigur cu privire la necesitatea this.style.mozBinding \u003d "", dar din experiența exprimării este mai bine să o joc în siguranță (în general, nu sunt foarte familiarizat cu această latură a Firefox, așa că s-ar putea să mă înșel).
Este posibil să fiți avertizat că această tehnică folosește un fișier extern și, în general, JavaScript. Nu-ti fie frica. În primul rând, dacă fișierul nu este încărcat și / sau JavaScript este dezactivat și nu funcționează, este în regulă, utilizatorul pur și simplu nu va vedea elipsa la sfârșit, textul va fi trunchiat la sfârșitul blocului. Adică, în acest caz obținem o soluție „discretă”. Poți vedea singur.
Astfel, avem un stil pentru browserele Big Four care implementează text-overflow pentru Opera, Safari și IE și îl emulează pentru Firefox, nu atât de fierbinte, dar este mai bine decât nimic.
Pasul patru
În acest moment, s-ar putea pune capăt, dar aș vrea să îmbunătățim puțin soluția noastră. Deoarece putem bloca constructorul pe orice bloc și, prin urmare, să câștigăm controlul asupra acestuia, de ce să nu folosim acest lucru. Să ne simplificăm structura:
text foarte lung
Oh da! Cred că veți fi de acord cu mine - de asta aveți nevoie!
Acum să eliminăm toate inutile din stil:
.ellipsis (overflow: ascuns; white-space: nowrap; line-height: 1.2em; height: 1.2em; text-overflow: elipsis; -o-text-overflow: elipsis; width: 100%; -moz-binding: url (moz_fix.xml # elipsă);) .moz-elipsă\u003e DIV: primul copil (float: stânga;) .moz-elipsă\u003e DIV + DIV (float: dreapta; marginea-sus: -1.2em;) .moz -ellipsis\u003e DIV + DIV :: after (fundal-culoare: alb; conținut: "...";)
Am eliminat în cele din urmă marginea roșie :)
Acum, să adăugăm un pic la moz_fix.xml:
Ce se petrece aici? Ne recreem structura HTML inițială. Adică, acele complexități cu blocuri se fac automat și numai în Firefox. Codul JavaScript este scris în cele mai bune tradiții :)
Din păcate, nu putem evita situația în care textul este tăiat la mijlocul scrisorii (deși, poate temporar, deoarece soluția mea este încă foarte brută și poate funcționa în viitor). Dar putem netezi puțin acest efect. Pentru aceasta avem nevoie de o imagine (fundal alb cu un gradient transparent) și câteva modificări ale stilului:
.moz-elipsă\u003e DIV: primul copil (float: stânga; marginea-dreapta: -26px; ) .moz-elipsă\u003e DIV + DIV (float: dreapta; margin-top: -1.2em; background: url (ellipsis.png) repeat-y; padding-left: 26px; }
Privim și ne bucurăm de viață.
Cu asta și puneți capăt.
Concluzie
Voi da un mic exemplu pentru un aspect al unei terțe părți. Am luat cuprinsul uneia dintre paginile Wikipedia (prima care a apărut) și am aplicat metoda descrisă mai sus pentru aceasta.
În general, această soluție poate fi numită universală doar pe o întindere. Totul depinde de aspectul dvs. și de complexitatea acestuia. Este posibil să aveți nevoie de un dosar sau poate de o tamburină. Deși în majoritatea cazurilor, cred că va funcționa. Și apoi, acum aveți un punct de plecare;)
Sper că ai învățat ceva interesant și util din articol;) Învață, experimentează, împărtășește.
Mult noroc!
Vlad Merjevici
În ciuda faptului că monitoarele de diagonale mari devin din ce în ce mai accesibile și rezoluția lor este în continuă creștere, uneori sarcina apare într-un spațiu limitat pentru a se potrivi mult text. De exemplu, acest lucru poate fi necesar pentru versiunea mobilă a site-ului sau pentru o interfață în care numărul de linii este important. În astfel de cazuri, are sens să tăiați linii lungi de text, lăsând doar începutul propoziției. Deci, vom aduce interfața într-o formă compactă și vom reduce cantitatea de informații afișate. Tunderea efectivă a liniilor se poate face pe partea serverului utilizând același PHP, dar prin CSS este mai ușor, în plus, puteți afișa întotdeauna întregul text, de exemplu, când plasați cursorul mouse-ului peste el. În continuare, vom lua în considerare metodele de tăiere a textului cu foarfece imaginare.
De fapt, totul se reduce la utilizarea proprietății de revărsare cu valoarea ascunsă. Diferențele constau doar în afișarea diferită a textului nostru.
Folosind overflow
Pentru ca proprietatea de revărsare să se afișeze cu text în toată splendoarea sa, trebuie să anulați învelirea textului folosind spațiul alb cu valoarea nowrap. Dacă acest lucru nu se face, atunci efectul de care avem nevoie nu va fi, cratimele vor fi adăugate textului și vor fi afișate în întregime. 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.
Figura: 1. Tipul de text după aplicarea proprietății overflow
După cum puteți vedea din figură, există un singur dezavantaj în general - nu este evident că textul are o continuare, astfel încât utilizatorul trebuie să fie conștientizat de acest lucru. Acest lucru se face de obicei cu un gradient sau elipsă.
Adăugarea unui gradient la text
Pentru a clarifica faptul că textul din dreapta nu se termină, îl puteți suprapune cu un gradient de la transparent la culoare de fundal (Figura 2). Acest lucru va crea efectul dizolvării treptate a textului.
Figura: 2. Text de gradient
Exemplul 2 arată cum să creați acest efect. Stilul elementului în sine va rămâne practic același, gradientul în sine va fi adăugat folosind :: after pseudo-element și CSS3. Pentru a face acest lucru, introduceți un pseudo-element gol prin proprietatea de conținut și aplicați un gradient cu diferite prefixe pentru browsere majore (exemplu 2). Lățimea gradientului poate fi modificată cu ușurință prin lățime, de asemenea puteți regla nivelul 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
Arpegiul intra-discret transformă poli-rândul, aceasta este verticala cu un singur pas în țesătura ultra-polifonică.
Această metodă nu funcționează în Internet Explorer până la versiunea 8.0, deoarece nu acceptă gradienți. Dar puteți renunța la CSS3 și puteți face gradientul în mod vechi, folosind o imagine PNG-24.
Această metodă funcționează numai cu un fundal solid și, în cazul unei imagini de fundal, gradientul peste text va fi izbitor.
Elipsă la sfârșitul textului
De asemenea, puteți utiliza puncte de suspensie în loc de un gradient la sfârșitul textului tăiat. Mai mult, va fi adăugat automat folosind proprietatea text-overflow. Este înțeles de toate browserele, inclusiv de versiunile mai vechi ale IE, iar singurul dezavantaj al acestei proprietăți este statutul său încă neclar. Se pare că această proprietate este inclusă în CSS3, dar codul cu ea nu trece de validare.
Exemplul 3 arată utilizarea proprietății de puncte de suspensie text-overflow, care adaugă o punctă de suspensie. Când plasați cursorul mouse-ului peste text, acesta este afișat integral și evidențiat cu o culoare de fundal.
Exemplul 3. Utilizarea text-overflow
HTML5 CSS3 IE Cr Op Sa Fx
Rezultatul acestui exemplu este prezentat în Fig. 3.
Figura: 3. Text cu puncte de suspensie
Un mare plus al acestor metode este faptul că gradientul și elipsa nu sunt afișate dacă textul este scurt și se încadrează în întregime în zona specificată. Deci, textul va fi afișat ca de obicei atunci când este complet vizibil pe ecran și decupat atunci când lățimea elementului scade.
Cât de deranjante sunt denumirile lungi ale legăturilor de produse - câte trei rânduri - sau titlurile lungi ale altor blocuri. Cât de grozav ar fi dacă ai putea constrânge cumva întregul lucru, să-l faci mai compact. Și când plasați mouse-ul, afișați deja titlul integral.
Pentru aceasta, CSS-ul nostru preferat vine în ajutorul nostru. Este foarte simplu, uite.
Să presupunem că avem un astfel de bloc din catalog cu mărfuri:
Iată structura sa:
Un produs minunat la un super-preț, doar 100 de ruble. Înveseliți-vă serile singuratice și dați o explozie de vitalitate!
Iată stilurile sale:
Someblock (frontieră: 1px solid #cccccc; margine: 15px automată; umplutură: 10px; lățime: 250px;). Header (frontieră-jos: 1px întrerupt; dimensiunea fontului: 16px; ;)
De acord, arată groaznic. Desigur, puteți scurta numele produsului. Dar dacă sunt sute sau mii? De asemenea, puteți utiliza php pentru a tăia o parte a numelui, limitându-vă la un anumit număr de caractere. Dar dacă aspectul se schimbă mai târziu și blocurile sunt mai mici sau invers de 2-3 ori mai mari? Nimic din toate acestea nu este o opțiune, nimic din toate acestea nu ni se potrivește.
Aici CSS și proprietatea sa magică vin în ajutorul nostru. text-overflow... Dar trebuie să fie utilizat corect împreună cu alte câteva proprietăți. Mai jos vă voi arăta o soluție gata făcută, după care vă voi explica ce este ce.
Așadar, lăsând deoparte editarea manuală a numelor de produse și tăierea programată a stilurilor, luăm CSS și vedem ce obținem:
Miracle Yudo agentul de alimentare cu energie este seara, misterios, artă. 20255-59
Un produs minunat la un super-preț, doar 100 de ruble. Înveseliți-vă serile singuratice și dați o explozie de vitalitate!
Ei bine, este mai bine? După părerea mea, foarte mult chiar! Plasați mouse-ul peste titlu ... voila! Aici ni se arată integral.
Nimic nu s-a schimbat în structura noastră, tocmai am adăugat o diva cu o clasă .antet etichetă de titlu. Și iată stilurile noi, actualizate:
Someblock (chenar: 1px solid #cccccc; margine: 15 px automat; umplutură: 10 px; lățime: 250 px;). ; overflow: ascuns; text-overflow: elipsă; white-space: nowrap;)
Vedeți ce am făcut:
- Am adăugat proprietatea la bloc white-space: nowrap, care elimină din text capacitatea de a înfășura cuvinte pe o nouă linie, trăgându-le astfel într-o linie;
- Apoi am adăugat proprietatea overflow: ascuns, care a limitat vizibilitatea liniei noastre la lățimea blocului, întrerupând astfel toate inutile și neprezentând-o vizitatorului;
- Ei bine, la final, am adăugat trei puncte la linia noastră folosind proprietatea text-overflow: elipsă, permițându-i astfel vizitatorului să înțeleagă că acesta nu este sfârșitul liniei și că este necesar, probabil, să ridici mouse-ul și să-l vezi în întregime.
Iubiți CSS, învățați CSS și construirea site-ului nu vi se va părea atât de dificil \u003d)
Există un text de lungime arbitrară care trebuie afișat într-un bloc cu înălțime și lățime fixe. În acest caz, dacă textul nu se potrivește complet, ar trebui afișat un fragment al textului care se potrivește complet în blocul specificat, după care se stabilește o elipsă.
O astfel de sarcină este destul de obișnuită, în același timp nu este atât de banală pe cât pare.
Opțiune pentru text cu o singură linie în CSS
În acest caz, poate fi utilizată proprietatea text-overflow: elipsis. În acest caz, containerul trebuie să aibă proprietatea revărsare egal ascuns sau clamă
Blocare (lățime: 250px; spațiu alb: nowrap; depășire: ascuns; depășire text: elipsă;)
Opțiune pentru text CSS cu mai multe linii
Prima modalitate de decupare a textului cu mai multe linii folosind proprietăți CSS este aplicarea pseudo-elementelor : inainte de și : după... În primul rând, marcajul HTML
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit teugue duis dolore
Și acum proprietățile în sine
Box (overflow: ascuns; înălțime: 200px; lățime: 300px; înălțimea liniei: 25px;) .box: înainte (conținut: ""; float: stânga; lățime: 5px; înălțime: 200px;) .box\u003e *: primul -child (float: dreapta; lățime: 100%; margine-stânga: -5px;) .box: după (conținut: "\\ 02026"; box-sizing: content-box; float: dreapta; poziție: relativă; sus: -25px; stânga: 100%; lățime: 3em; margine-stânga: -3em; padding-dreapta: 5px; text-align: dreapta; fundal-dimensiune: 100% 100%; fundal: liniar-gradient (la dreapta, rgba (255, 255, 255, 0), alb 50%, alb);)
O altă modalitate este de a utiliza proprietatea de lățime a coloanei prin care setăm lățimea coloanei pentru textul cu mai multe linii. Cu toate acestea, atunci când utilizați această metodă, nu veți obține o elipsă la sfârșit. HTML:
Block (overflow: hidden; height: 200px; width: 300px;) .block__inner (-webkit-column-width: 150px; -moz-column-width: 150px; column-width: 150px; height: 100%;)
A treia soluție pentru textul cu mai multe linii în CSS este pentru browsere Webkit... În el va trebui să folosim mai multe proprietăți specifice cu prefixul -webkit... Principala este -webkit-line-clamp, care vă permite să specificați numărul de linii de afișat într-un bloc. Soluția este frumoasă, dar destul de limitată, datorită activității sale într-un grup limitat de browsere
Blocare (overflow: ascuns; text-overflow: elipsă; afișaj: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;)
Opțiune JavaScript pentru text cu mai multe linii
Aici se folosește un bloc invizibil suplimentar, în care este plasat inițial textul nostru, după care se elimină câte un caracter odată până când înălțimea acestui bloc devine mai mică sau egală cu înălțimea blocului dorit. Și la final, textul se mută în blocul original.
var bloc \u003d document. querySelector (".block"), text \u003d bloc. innerHTML, clonă \u003d document. createElement ("div"); clona. stil. poziție \u003d „absolut”; clona. stil. vizibilitate \u003d "ascuns"; clona. stil. lățime \u003d bloc. clientWidth + "px"; clona. HTML interioară \u003d text; document. corp. appendChild (clonă); var l \u003d text. lungime - 1; for (; l\u003e \u003d 0 && clone. clientHeight\u003e block. clientHeight; - l) (clone. innerHTML \u003d text. substring (0, l) + "...";) bloc. innerHTML \u003d clonă. HTML interioară;
Acesta este sub forma unui plugin jQuery:
(funcție ($) (var truncate \u003d funcție (el) (var text \u003d el. text (), înălțime \u003d el. înălțime (), clonare \u003d el. clonare (); clonare. css ((poziție: "absolut"), vizibilitate: „ascuns”, înălțime: „automat”)); el. după (clonare); var l \u003d text. lungime - 1; pentru (; l\u003e \u003d 0 && clonare. înălțime ()\u003e înălțime; - l) (clonează. text (text. șir (0, l) + "...");) el. text (clonează. text ()); clonează. elimina ();); $. fn. truncateText \u003d funcție () (returnează acest lucru. each (function () (truncate ($ (this));)););) (jQuery));
Introducerea CSS3 revoluționează viața de zi cu zi a designerilor de web. CSS3 nu încetează să ne uimească în fiecare zi. Lucrurile care anterior nu se puteau face decât cu javascript sunt acum ușor de realizat cu CSS3. De exemplu, proprietatea Text-Overflow.
Uneori, în procesul de creare a site-urilor, trebuie să ascundem o parte din textul dinamic fără a merge la rândul următor. Adică, introduceți text lung într-un tabel cu lățime fixă. În același timp, este necesar să arătăm utilizatorului că partea vizibilă a textului nu este totul. Există, de asemenea, o parte ascunsă. Acest lucru poate fi afișat cu puncte de suspensie (...).
Cu CSS3 putem face acest lucru cu ușurință folosind proprietatea CSS overflow text
Markup
Text-overflow: elipsă;
Valoare elipsă vă permite să adăugați o elipsă (...) după text
Proprietatea text-overflow: elipsis este utilă atunci când:
1. Textul iese în afara celulei
2. Celula are spațiu liber: nowrap.
Avem un div cu o lățime de 150 pixeli pentru a afișa numele companiei din baza de date. Dar, în același timp, nu vrem ca numele companiilor lungi să treacă la o nouă linie și să strice aspectul mesei. Adică, trebuie să ascundem textul care depășește 150 de pixeli. De asemenea, dorim să informăm utilizatorul despre acest lucru. Așa că înseamnă că nu este afișat tot numele. Și dorim ca tot textul să fie afișat pe mouse-ul.
Să aruncăm o privire la modul în care putem face acest lucru cu CSS3.
Company-wrap ul li (
text-overflow: elipsă;
overflow: ascuns;
spațiu alb: nowrap; )
- Numele Companiei
- Gestionarea activelor Envestnet
- Russell Investments
- Rețeaua financiară reciprocă din nord-vest
- ING Rețele financiare
Suport pentru browser
Cu suport în rândul browserelor, această proprietate are o mică nuanță. Toate, cu excepția firefox-ului, sunt perfect fine. Dar, din fericire, există și o soluție la această problemă!
Elipsă în Firefox
Din păcate, gecko-ul Firefox (motor de redare) nu acceptă această proprietate. Cu toate acestea, acest browser acceptă XBL, cu care vom ieși din această situație.
Gecko Este un motor de aspect gratuit pentru browserele Mozilla Firefox, Netscape și altele. Vechile nume sunt „Raptor” și „NGLayout”. Conceptul de bază al lui Gecko este de a sprijini standardele deschise de Internet, cum ar fi HTML, CSS, W3C DOM, XML 1.0 și JavaScript. Un alt concept este multiplataforma. Astăzi Gecko rulează pe sisteme de operare Linux, Mac OS X, FreeBSD și Microsoft Windows, precum și Solaris, HP-UX, AIX, Irix, OS / 2, OpenVMS, BeOS, Amiga și altele.
Pentru a afișa puncte de suspensie în Firefox, trebuie să adăugăm o linie la foaia de stil.
dacă doriți să dezactivați proprietatea, trebuie doar să adăugați:
Moz-binding: url ("bindings.xml # none");
Următorul pas este crearea unui fișier bindings.xml în aceeași locație ca foaia de stil. Putem folosi orice editor de text pentru asta! Copiați codul de mai jos și denumiți fișierul bindings.xml.
var strings \u003d this.textContent.split (/ \\ s + / g)
if (! strings [0]) strings.shift ()
if (! strings [strings.length - 1]) strings.pop ()
this.value \u003d strings.join ("")
this.display \u003d strings.length? "": "nici unul"
Cod final pentru toate browserele
Company-wrap ul li (
text-overflow: elipsă;
-o-text-overflow: elipsă;
-moz-obligatoriu: url ("bindings.xml # elipsa");
spațiu alb: nowrap;
overflow: ascuns;
}
CSS3 devine principalul instrument pentru designerii de web din întreaga lume pentru a crea site-uri nemaivăzute, cu un minim de cod. Există soluții simple, literalmente cu o singură linie, care anterior erau posibile doar cu Photoshop sau javascript. Începeți să explorați posibilitățile CSS3 și HTML5 astăzi și nu veți regreta!
Pentru a te distinge din masa cenușie a traducătorilor și a-ți câștiga simpatia, dragi cititori, la finalul lecțiilor mele vor exista gânduri și aforisme înțelepte. Toată lumea din aceste rânduri va găsi ceva propriu :)
Îndurează cu demnitate ceea ce nu poți schimba.
