Elipsă CSS la sfârșit. Text-overflow în Firefox și totul, totul, totul

Determină vizibilitatea textului din bloc dacă întregul text nu se încadrează în zona specificată. Există două opțiuni: textul este întrerupt; textul este tăiat și o elipsă este adăugată la sfârșitul liniei. text-overflow funcționează atunci când proprietatea overflow este setată la auto, scroll sau ascunsă pentru un bloc.

scurte informații

Denumiri

Valorile

clip Textul este decupat pentru a se potrivi zonei. elipsa Textul este trunchiat și o elipsă este adăugată la sfârșitul liniei.

Exemplu

Câmpul magnetic stinge neglijabil marele cerc al sferei cerești, caz în care cresc excentricitățile și înclinațiile orbitelor.

Rezultatul acestui exemplu este prezentat în Fig. unu.

Figura: 1. Elipsă la sfârșitul textului

Model de obiect

Un obiect.style.textOverflow

Notă

Opera înainte de versiunea 11 folosește proprietatea -o-text-overflow.

Specificație

Fiecare specificație trece prin mai multe etape de aprobare.

• Recomandare - Această specificație este aprobată de W3C și recomandată ca standard.
• Recomandarea candidatului ( Posibilă recomandare) - grupul responsabil pentru standard este mulțumit că este în conformitate cu obiectivele sale, dar este nevoie de ajutorul comunității de dezvoltatori pentru implementarea standardului
• Recomandarea propusă ( Recomandare sugerată) - În acest moment, documentul este prezentat Consiliului consultativ al W3C pentru aprobare finală.
• Proiect de lucru - O versiune mai matură a proiectului după discuție și revizuire pentru revizuirea comunității.
• Proiectul editorului ( Proiect editorial) - o versiune preliminară a standardului după editare de către editorii de proiect.
• Proiect ( Proiect de caiet de sarcini) este prima versiune a standardului.

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 este mai ușor prin CSS, în plus, puteți afișa întotdeauna întregul text, de exemplu, când treceți cu mouse-ul 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 înfășurarea 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. unu.

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.

Introducerea CSS3 revoluționează rutina zilnică 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 larg de 150 px pentru a afișa numele companiilor din baza de date. Î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; )

Suport pentru browser

Cu ajutorul browserului, 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 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. Gecko rulează în prezent 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 multe 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.

document.getAnonymousNodes (aceasta) [0]
this.label.style
this.style.display
if (this.style.display! \u003d val) this.style.display \u003d val

this.label.value
if (this.label.value! \u003d val) this.label.value \u003d val



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"




this.update ()


this.update ()

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 ieși din masa gri 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.

Cât de enervante sunt uneori 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 va veni în salvarea noastră. Este foarte simplu, uite.

Să presupunem că avem un astfel de bloc din catalog cu mărfuri:

Iată structura sa:

Miracle Yudo cel care dă forța este seară, 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!

Iată stilurile sale:

Someblock (margine: 1px solid #cccccc; margine: 15px automată; umplutură: 10px; lățime: 250px;). ;)

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 salvarea noastră. text-overflow... Dar trebuie să fie utilizat în mod corespunzător î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 cel care dă forța este seară, 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 (frontieră: 1px solid #cccccc; margine: 15px automată; umplutură: 10px; lățime: 250px;). ; 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)