Trei puncte html. Tăierea textului cu o singură linie sau pe mai multe rânduri în funcție de înălțime, cu adăugarea unor puncte de suspensie. Trei puncte în Firefox

Introducerea CSS3 implică schimbări revoluționare în rutina zilnică a designerilor web. CSS3 continuă să ne uimească în fiecare zi. Lucrurile care anterior puteau fi făcute doar cu javascript sunt acum ușor de făcut cu CSS3. De exemplu, proprietatea Text-Overflow.

Uneori, în procesul de creare a site-urilor web, trebuie să ascundem o parte din textul dinamic fără a trece la rândul următor. Adică, inserați text lung într-un tabel cu o lățime fixă. În același timp, este necesar să arătați utilizatorului că partea vizibilă a textului nu este totul. Există și o parte ascunsă. Acest lucru poate fi afișat folosind o elipsă (...).

Cu CSS3 putem face acest lucru cu ușurință folosind proprietatea text-overflow CSS

Marcare

Text-overflow: puncte de suspensie;

Sens elipsă vă permite să adăugați o elipsă după text (...)

Proprietatea text-overflow: elipse este utilă atunci când:

1. Textul se extinde dincolo de celulă
2. Există spațiu liber în celulă: nowrap.

Avem un div cu o lățime de 150 pixeli pentru a afișa numele companiilor din baza de date. Dar, în același timp, nu dorim ca nume lungi de companii să sară la o nouă linie și să strice aspectul mesei. Adică, trebuie să ascundem textul care se extinde dincolo de 150 de pixeli. De asemenea, dorim să informăm utilizatorul despre acest lucru. Deci el înseamnă că nu este afișat întregul titlu. Și vrem ca tot textul să fie afișat atunci când mouse-ul este plasat.

Să aruncăm o privire la cum putem face acest lucru folosind CSS3.

Company-wrap ul li (
text-overflow: puncte de suspensie;
preaplin: ascuns;
spatiu alb:nowrap; )

• Numele companiei


• Managementul activelor Investnet


• Investiții Russell


• Northwestern Mutual Financial Network


• ING Financial Networks

Suport pentru browser

Cu suport între browsere, această proprietate are o mică nuanță. Toate, cu excepția Firefox, se afișează corect și perfect. Dar, din fericire, există o soluție la această problemă!

Trei puncte în Firefox

Din păcate, gecko (motorul de randare din Firefox) nu acceptă această proprietate. Cu toate acestea, acest browser acceptă XBL, cu ajutorul căruia vom ieși din această situație.

Gecko este un motor de layout gratuit pentru pagini web pentru Mozilla Firefox, Netscape și alte browsere. Numele vechi sunt „Raptor” și „NGLayout”. Conceptul de bază al lui Gecko este să accepte standarde web deschise, cum ar fi HTML, CSS, W3C DOM, XML 1.0 și JavaScript. Un alt concept este cross-platform. Astăzi, Gecko rulează pe sistemele 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 punctele de suspensie în firefox, trebuie să adăugăm o linie la foaia de stil.

dacă doriți să dezactivați proprietatea, adăugați:

Moz-binding: url("bindings.xml#none");

Următorul pas este să creați un fișier bindings.xml în aceeași locație în care este stocată 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(this)[ 0 ]
acest.stil.etichetă
acest.stil.afișaj
if(this.style.display != val) this.style.display= val

această.valoare.etichetă
if(this.label.value != val) this.label.value= val



var strings= this.textContent.split(/\s+/g)
if(!strings[ 0 ]) strings.shift()
if(!strings[ strings.length - 1 ]) strings.pop()
this.value= strings.join(" ")
this.display= strings.length ? "" : "niciunul"


this.update()


this.update()

Cod final pentru toate browserele

Company-wrap ul li (
text-overflow: puncte de suspensie;
-o-text-overflow: puncte de suspensie;
-moz-binding: url("bindings.xml#ellipsis");
spatiu alb: nowrap;
preaplin: ascuns;
}

CSS3 devine instrumentul de bază pentru designerii web din întreaga lume pentru a crea site-uri web nemaivăzute până acum cu cod minim. Există soluții simple, literalmente cu o singură linie, care anterior erau posibile doar folosind Photoshop sau javascript. Începeți să învățați puterea CSS3 și HTML5 astăzi și nu veți regreta!

Pentru a ieși din masa cenușie a traducătorilor și pentru a vă câștiga simpatia, dragi cititori, la finalul lecțiilor mele vor fi gânduri înțelepte și aforisme. Fiecare va găsi ceva al lui în aceste rânduri :)

Suportă cu demnitate ceea ce nu poți schimba.

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 o versiune mobilă a site-ului 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 rezumă 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

Dimensiune text (spațiu alb: nowrap; /* Anulați împachetarea textului */ overflow: ascuns; /* Decupați conținutul */ fundal: #fc0; /* Culoare fundal */ padding: 5px; /* Margini */ )

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 de dizolvare treptată a textului.

Orez. 2. Text gradient

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

Dimensiune text ( spatiu alb: nowrap; /* Anulează împachetarea textului */ overflow: ascuns; /* Decupează conținut */ padding: 5px; /* Margini */ fundal: #fc0; /* Culoare de fundal */ poziție: relativă ; /* Poziționare relativă */ ) .size::after ( conținut: ""; /* Afișează elementul */ poziție: absolută; /* Poziționare absolută */ dreapta: 0; sus: 0; /* Poziția elementului */ width : 40px; /* Gradient width*/ height: 100% /* Parent height */ /* Gradient */ background: -moz-linear-gradient(stânga, rgba(255,204,0, 0,2); 100%) ; fundal: -webkit-linear-gradient(stânga, rgba(255,204,0, 0,2), #fc0 100%): -o-linear-gradient(stânga, rgba(255,204,0, 0,2); #fc0 100 %; fundal: -ms-linear-gradient(stânga, rgba(255,204,0, 0,2), #fc0 100%); #fc0 100 %);

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

Această metodă nu funcționează în 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. Este înțeles de toate browserele, 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

Dimensiune text (spațiu alb: nowrap; /* Anulați împachetarea textului */ overflow: ascuns; /* Decupați conținutul */ padding: 5px; /* Margini */ text-overflow: elipse; /* Elipse */ ) .size :hover ( background: #f0f0f0; /* Culoare de fundal */ white-space: normal; /* Normal text wrapping */ ) Inconștientul provoacă contrast, acest lucru este desemnat de Lee Ross ca o eroare fundamentală de atribuire, care poate fi văzută în multe experimente.

Rezultatul acestui exemplu este prezentat în Fig. 3.

Orez. 3. Text cu elipse

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ă.

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 folosind proprietățile CSS este aplicarea pseudo-elementelor :înainteŞi :după. Să începem cu 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 augue duis dolore te feugait nulla facilisi.

Ș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:

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 augue duis dolore te feugait nulla facilisi.

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% ; )

A treia modalitate de a rezolva textul cu mai multe linii folosind CSS este pentru browserele 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 se folosește 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 blocului 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 ));

Definește parametrii de vizibilitate ai textului dintr-un bloc dacă întregul text nu se încadrează în zona specificată. Există două opțiuni: textul este tăiat; textul este tăiat și se adaugă o elipsă la sfârșitul rândului. text-overflow funcționează dacă valoarea proprietății blocului este preaplin setat la automat, scroll sau ascuns.

Informații scurteNotații Descriere Exemplu

	Indică tipul valorii.
A && B	Valorile trebuie să fie afișate în ordinea specificată.	&&
A | B	Indică faptul că trebuie să selectați o singură valoare dintre cele propuse (A sau B).	normal | cu majuscule mici
A || B	Fiecare valoare poate fi folosită independent sau împreună cu altele în orice ordine.	lățime || conta
	Grupează valori.	[ recolta || cruce]
*	Repetați de zero sau de mai multe ori.	[,]*
+	Repetați una sau mai multe ori.	+
?	Tipul, cuvântul sau grupul specificat este opțional.	medalion?
(A, B)	Repetați cel puțin A, dar nu mai mult de B ori.	{1,4}
#	Repetați o dată sau de mai multe ori, separate prin virgule.	#

× Valori

clip Textul este decupat pentru a se potrivi zonei. puncte suspensie Textul este trunchiat și se adaugă puncte suspensie la sfârșitul rândului.

Exemplu

text-overflow p.clip ( spatiu alb: nowrap; /* Dezactivează împachetarea liniilor */ overflow: ascuns; /* Decupează tot ce nu se potrivește în zonă */ fundal: #fc0; /* Culoare de fundal */ padding: 5px ; /* Margini în jurul textului */ text-overflow: /* Adăugați puncte de suspensie */ )

Câmpul magnetic atenuează neglijabil cercul cel mare al sferei cerești, caz în care excentricitățile și înclinațiile orbitelor cresc.

Rezultatul acestui exemplu este prezentat în Fig. 1.

Orez. 1. Puncte de suspensie la sfârșitul textului

Model obiect

Obiect.style.textOverflow

Nota

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

Caietul de sarcini

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

• Recomandare - Specificația a fost aprobată de W3C și este recomandată ca standard.
• Recomandarea candidatului - Grupul responsabil pentru standard este mulțumit că își îndeplinește obiectivele, dar are nevoie de ajutor din partea comunității de dezvoltare pentru a implementa standardul.
• Recomandare propusă - În această etapă, documentul este înaintat Consiliului Consultativ W3C pentru aprobare finală.
• Proiect de lucru - O versiune mai matură a unui proiect care a fost discutat și modificat pentru revizuire comunitară.
• Proiectul redactorului (Editorial draft) - o versiune nefinalizată a standardului după ce au fost aduse modificări de către editorii de proiect.
• Draft (Draft specification) - prima versiune schiță a standardului.

×