Tiparea textului unic sau multi-linie în înălțime cu adăugarea de puncte. Text-overflow în Firefox și totul, toate, toate CSS Troytiech

Introducerea CSS3 implică schimbări revoluționare în săptămânile zilnice ale designerilor web. CSS3 nu încetează să ne surprindă în fiecare zi. Lucrurile pe care le-ați făcut doar cu JavaScript sunt acum ușor de făcut cu CSS3. De exemplu, proprietatea textului.

Uneori, în timpul creării de site-uri, trebuie să ascundem o parte din textul dinamic fără trecerea la următoarea linie. Aceasta este, introduceți un text lung într-o masă cu o lățime fixă. În același timp, trebuie să arătați utilizatorului că partea vizibilă a textului nu este tot. Există, de asemenea, o parte ascunsă. Similar poate fi arătat folosind un triplin (...).

Cu CSS3, putem implementa cu ușurință utilizând proprietatea CSS Text-Flowflow.

Marcare

Supravegherea textului: Ellipsis;

Valoare elipsă Vă permite să adăugați un Troytiech (...)

Text-overflow Proprietate: Ellipsis este util atunci când:

1. Textul depășește celula
2. În celulă există spațiu liber: Nowrap.

Avem o div cu o lățime de 150 de pixeli pentru a afișa numele companiilor din baza de date. Dar, în același timp, nu vrem ca numele lungi ale companiilor să învețe la o nouă linie și să strică aspectul mesei. Adică, trebuie să ascundem textul care depășește granițele de 150 de pixeli. De asemenea, dorim să informăm utilizatorul despre el. Așa că el a vrut să spună că nu este afișat tot numele. Și dorim întregul text atunci când plimbăm mouse-ul.

Să aruncăm o privire când o putem face cu CSS3.

Compania-Wrap UL Li (
supravegherea textului: Ellipsis;
depășirea: ascunsă;
spațiu alb: norap; )

Suport pentru browser.

Cu sprijinul browserelor, această proprietate are o singură asistentă mică. Totul, cu excepția Firefoxului este perfect afișat corect. Dar ei cântând, există o soluție și această problemă!

Troyaty în Firefox.

Din păcate, Gecko (motorul de ieșire al paginilor c) Firefox nu acceptă această proprietate. Cu toate acestea, acest browser acceptă XBL, cu care vom ieși din această situație.

Gecko. - Acesta este un motor gratuit de ieșire a motorului (English Layout Engine) Browsere Mozilla Firefox, Netscape și altele. Numele vechi sunt "Raptor" și "Nglayout". Conceptul principal al Gecko este de a sprijini standardele de internet deschise, cum ar fi HTML, CSS, W3C DOM, XML 1.0 și JavaScript. Un alt concept - platformă încrucișată. Până în prezent, Gecko funcționează pe sistemele de operare Linux, Mac OS X, FreeBSD și Microsoft Windows, precum și pe Solaris, HP-UX, AIX, IRIX, OS / 2, OpenVMS, Beos, Amiga și altele.

Pentru a afișa o triplă în Firefox, trebuie să adăugăm un șir la foaia de stil.

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

Moz-legare: URL ("Legături.xml # none");

Următorul pas este să creați un fișier de legare. În același loc î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.getanononimnodesNodes (acest) [0]
Acest.Label.style.
Acest.style.display.
Dacă (the the.style.display! \u003d val) the.style.display \u003d val

Acest.Label.value.
Dacă (this.label.value! \u003d Val) the the.label.value \u003d val



Var Strings \u003d this.textContent.split (/ s + / g)
Dacă (! șiruri [0]) Strings.Shift ()
Dacă (! Șiruri [strings.Length - 1]) strings.pop ()
acest.value \u003d strings.join ("")
Acest.Display \u003d șiruri de caractere. "": "NICI UNUL"




acest.update ()


acest.update ()

Codul final pentru toate browserele

Compania-Wrap UL Li (
Supravegherea textului: Ellipsis;
-O-text-overflow: elipsis;
-Moz-legare: URL ("Legături.xml # elipsis");
Spațiu alb: norap;
Depășirea: ascunsă;
}

CSS3 devine principalele instrumente de designer web din întreaga lume pentru a crea site-uri fără precedent cu un cod minim. Există simple, literalmente într-o singură linie, soluții care au fost posibile numai cu Photoshop sau JavaScript. Porniți studiul funcțiilor CSS3 și HTML5 astăzi și nu veți regreta!

Pentru a ieși din masa gri de traducători și a vă cuceri simpatiile, dragi cititori, la sfârșitul lecțiilor mele vor fi gânduri și aforisme înțelepte. Fiecare dintre aceste linii va găsi ceva :)

Transferați cu avantajul pe care nu îl puteți schimba.

Există un text al unei lungimi arbitrare care trebuie afișată în interiorul înălțimii fixe și a unității de lățime. În acest caz, dacă textul nu este plasat complet, trebuie afișat un fragment de text, care este complet plasat într-un bloc specificat, după care este setat punctul.

Această sarcină este destul de comună, în același timp nu este la fel de trivială, așa cum se pare.

Opțiunea pentru textul cu o singură linie pe CSS

În acest caz, puteți utiliza proprietatea textului de suprapunere: elipsis. În acest caz, recipientul trebuie să aibă o proprietate. revărsare. Egal ascuns. sau clamă

Bloc (lățime: 250px, spațiu alb: Nowrap; Overflow: Ascunse; Text-Deverflow: Ellipsis;)

Opțiunea pentru textul multi-line pe CSS

Primul mod de a reduce textul cu mai multe linii utilizând proprietățile CSS pentru a aplica Pseudo-elemente : Inainte de. și : după.. Pentru a porni marcajul HTML

Lorem Ipsum Dolor Sit Amet, Consectorduer Adipiscing Elit, Sed Diam Nonummy NIBH EUISMOD TINCIDUNT UT Laoreet Dolore Magna Aliquam Erat Volutpat. UT WISI ENM AD MINIM VENIAM, QUIS NOSTRUD EXERCIȚIE ULLAMCORPER SUSCIPIT LOBORTIS NISL UT ALYIPT ex Ea Commodo Conquat. DUIS Autem Vel EUM IRIURE DOLOR ÎN HENDRERIT ÎN VULUTUL VELIT ESSE MOLISTIE CONSQUIAT, VEL ILLUM DOLORE UE FEUGIAT NULLA Facilisis la Verro Eros et Acumsan Et Iusto Odio Dignissim qui Blandit Praesent Lupatum Zzrril Dlenit Augue Duis Dolore Te Feugait Nulla Facilisi.

Și acum proprietățile însele

Caseta (overflow: ascunsă; înălțime: 200px; lățime: 300px; înălțimea liniei: 25px;) .box: înainte: "plutitor: lăsat: 5px; înălțime: 200px;) .box\u003e *: prima -CHILD (Float : Dreapta; lățimea: 100%; margine-stânga: -5px;) .box: după (conținut: "\\ 02026"; cutie de caractere: cutie de conținut: dreapta; dreapta; poziție: rudă; sus: -25px; stânga : 100%; Lățime: 3EM; Margin-stânga: -3Em; Hadding-dreapta: 5px; Text-align: dreapta; fundal-dimensiune: 100% 100%; fundal: linear-gradient (la dreapta, RGBA (255, 255 , 255, 0), alb 50%, alb);)

O altă modalitate este de a utiliza proprietatea de lățime a coloanei cu care am setat lățimea coloanei pentru textul multi-line. Adevărat, atunci când se utilizează această metodă, pentru a stabili la sfârșitul elipsei. HTML:

Lorem Ipsum Dolor Sit Amet, Consectorduer Adipiscing Elit, Sed Diam Nonummy NIBH EUISMOD TINCIDUNT UT Laoreet Dolore Magna Aliquam Erat Volutpat. UT WISI ENM AD MINIM VENIAM, QUIS NOSTRUD EXERCIȚIE ULLAMCORPER SUSCIPIT LOBORTIS NISL UT ALYIPT ex Ea Commodo Conquat. DUIS Autem Vel EUM IRIURE DOLOR ÎN HENDRERIT ÎN VULUTUL VELIT ESSE MOLISTIE CONSQUIAT, VEL ILLUM DOLORE UE FEUGIAT NULLA Facilisis la Verro Eros et Acumsan Et Iusto Odio Dignissim qui Blandit Praesent Lupatum Zzrril Dlenit Augue Duis Dolore Te Feugait Nulla Facilisi.

Bloc (depășire: ascunsă; înălțime: 200px; lățime: 300px;) .block__inner (-webit-coloană-lățime: 150px; -Moz-coloană-lățime: 150px; lățimea coloanei: 150px; înălțime: 100%;

A treia cale de a rezolva pentru textul multi-line pe CSS este pentru browsere Webkit.. În aceasta, va trebui să folosim mai multe proprietăți specifice cu prefixul -Webit.. Principalul este -Webkit-Line-Clamp care vă permite să specificați numărul de șiruri de caractere afișate în bloc. Soluția este frumoasă, dar destul de limitată datorită activității sale într-un grup limitat de browsere

Bloc (depășire: ascunsă, text-devers: elipsă; Afișaj: -Webkit-cutia; -Webkit-Line-Clemp: 2; -Webkit-Box-Orient: vertical;

Opțiunea pentru textul multi-line pe JavaScript

Utilizează un bloc invizibil suplimentar în care textul nostru este inițial plasat, după care este îndepărtat de un caracter, până când înălțimea acestei unități devine mai mică sau egală cu înălțimea blocului dorit. Și la sfârșit, textul se deplasează la blocul sursă.

varf bloc \u003d document. QuerySelector ("Block"), text \u003d bloc. INNERTML, CLONE \u003d Document. Creare ("div"); Clona. Stil. Poziția \u003d "absolut"; Clona. Stil. Vizibilitate \u003d "ascunsă"; Clona. Stil. lățime \u003d bloc. ClientWidth + "Px"; Clona. Innerhtml \u003d Text; Document. Corp. Apendchild (clona); Var l \u003d text. Lungime - 1; Pentru (; l\u003e \u003d 0 && clona. ClientHeight\u003e Block. ClientHeight; - L) (clona. Innerhtml \u003d Text. Substring (0, l) + "...") bloc. Innerhtml \u003d clona. Innerhtml;

La fel sub forma unui plugin pentru jQuery:

(FUNCTION ($) (VAR TRUCHATE \u003d EL. Text \u003d el. Text (), înălțime \u003d el. Înălțime (), clona \u003d el. Clona (); clona. Css ((poziție: "absolut", vizibilitate: "Ascuns ", Înălțime:" Auto ")); el. După (clona); var \u003d text. Lungime - 1; pentru (; l\u003e \u003d 0 & clona. Înălțime ()\u003e înălțime; - l) (clona. Text (text. Text. Substring (0, l) + "...");) EL. text (text text ()); clona. Eliminați ();); $. fn. fn truncateText \u003d funcție () (returnați acest lucru () (Trunchiată ($);)););) (jQuery));

Cu toate acestea, uneori numele lungi ale legăturilor de bunuri sunt iritate - trei linii sau anteturi lungi de blocuri diferite. Cum ar fi minunat dacă ar fi fost posibilă cumva toată această lucrare, faceți o compactă. Și când deplasați mouse-ul afișați deja titlul complet.

Pentru aceasta, CSS-ul nostru preferat va veni la salvare. Totul este foarte simplu, uite.

Să presupunem că avem un astfel de bloc din catalogul cu bunurile:

Iată structura sa:

Miracle Yudo Syloper supraponderal, misterios, artă. 20255-59.

Mărfuri minunate la un preț super-preț, doar 100 de ruble. Scrați serile singure și dați un val de viață!

Iată stilurile lui:

SomeBlock (margine: 1px solid #CCCCCCCCCCC; margine: 15px auto; padding: 10px; lățime: 250px;) .header (fundul de frontieră: 1px splate; font-dimensiune: 16px; Greutate font: Bold; Margin-Bottom ;)

Sunt de acord, pare teribil. Desigur, puteți reduce numele bunurilor. Dar dacă o astfel de sute sau mii? De asemenea, puteți utiliza PHP pentru a reduce partea din titlu, limitând orice număr de caractere. Dar ce ar trebui să fac dacă aspectul se va schimba și blocurile vor fi mai mici sau dimpotrivă, de 2-3 ori mai mult? Toate acestea nu sunt o opțiune, toate acestea nu sunt potrivite pentru noi.

Și aici vom veni la salvare și proprietatea sa magică text-overflow.. Dar trebuie folosit pentru a fi utilizat împreună cu alte proprietăți. Mai jos vă voi arăta o soluție gata făcută, după care voi explica ce.

Deci, trecerea la editarea manuală a numelor de bunuri și de tăiere a software-ului de stiluri, luăm în mâinile CSS și ne uităm la noi:

Miracle Yudo Syloper supraponderal, misterios, artă. 20255-59.

Mărfuri minunate la un preț super-preț, doar 100 de ruble. Scrați serile singure și dați un val de viață!

Bine, mai bine? Cred că foarte mult! Și aduceți mouse-ul la titlul ... Voila! Aici este arătat complet.

În structură, nu am schimbat nimic, am adăugat doar o diva cu o clasă .Antet. Tipul de titlu. Și aici sunt noi stiluri completate:

SomeBlock (margine: 1px solid #CCCCCCCCCCC; margine: 15px auto; padding: 10px; lățime: 250px;) .header (fundul de frontieră: 1px splate; font-dimensiune: 16px; Greutate font: Bold; Margin-Bottom ; Overflow: Ascunse; Suprafață de text: Ellipsis, spațiu alb: Nowrap;)

Vedeți ce am făcut:

• Am adăugat o unitate de proprietate. spațiu alb: nowrapcare elimină cuvintele la noul șir din text, trăgând astfel în linie;
• Apoi am adăugat proprietatea depășirea: ascunsă.care limitează vizibilitatea șirului nostru larg, tăind astfel totul prea mult și arătându-l vizitatorului;
• Ei bine, la sfârșitul anului am adăugat Troytiech la proprietățile media de rând text-overflow: elipsisAstfel, oferind vizitatorului să înțeleagă că acesta nu este sfârșitul liniei și ceea ce aveți nevoie, probabil, aduceți chiuveta și vedeți-o complet.

Dragostea CSS, Studiul CSS, iar clădirea site-ului nu vă va părea un lucru atât de dificil \u003d)

Vlad Merzehevich.

În ciuda faptului că monitorii diagonalelor mari devin din ce în ce mai accesibile, iar rezoluția lor este în continuă creștere, uneori sarcina într-un spațiu limitat apare pentru a asigura o mulțime de text. De exemplu, poate fi necesară pentru o versiune mobilă a site-ului sau pentru o interfață în care numărul de rânduri este important. În astfel de cazuri, este logic să tăiați linii lungi de text, lăsând doar începutul propoziției. Deci, oferim interfața unui formular compact și reducem cantitatea de informații afișate. Tăierea rândurilor se poate face pe partea serverului folosind același PHP, dar prin CSS este mai simplu, în plus, puteți afișa întotdeauna textul în întregime, de exemplu, când deplasați cursorul mouse-ului. Apoi, luați în considerare metodele cum textul taie foarfecele imaginare.

De fapt, totul se referă la utilizarea proprietăților de depășire cu valoarea ascunsă. Diferențele doar linge în afișarea diferită a textului nostru.

Folosind suprapunerea

Pentru ca proprietatea suprapunerii să se arate cu textul în toată gloria sa, trebuie să anulați transferul de text utilizând spațiul alb cu valoarea Nowrap. Dacă acest lucru nu este făcut, atunci efectul de care avem nevoie nu va fi, transferurile vor fi adăugate în text și vor fi afișate în întregime. În Exemplul 1, se arată cum să tăiați textul lung prin setul specificat de proprietăți de stil.

Exemplul 1. Depășirea textului

HTML5 CSS3 adică CR OP SA FX

Rezultatul acestui exemplu este prezentat în fig. unu.

Smochin. 1. Tipul de text după aplicarea proprietăților de depășire

După cum se poate vedea din desen, lipsa ca un întreg este una - nu este evidentă că textul are o continuare, deci este necesar să se ofere acestui utilizator utilizatorului. Acest lucru aplică în mod obișnuit un gradient sau o elipsă.

Adăugați gradient la text

Pentru a clarifica faptul că textul din partea dreaptă nu se termină, în partea de sus, puteți aplica un gradient dintr-o culoare transparentă la culoarea fundalului (figura 2). Acest lucru va crea efectul dizolvării treptate a textului.

Smochin. 2. Text cu gradient

Exemplul 2 prezintă crearea acestui efect. Stilul elementului în sine va rămâne practic la fel, gradientul în sine va fi adăugat folosind un element Pseudo:: Afterter și CSS3. Pentru a face acest lucru, introduceți un element pseudo-element gol prin proprietatea conținutului și utilizați un gradient cu diferite prefixe pentru browserele principale (Exemplul 2). Lățimea gradientului este ușor de schimbat prin lățime, puteți ajusta, de asemenea, gradul de transparență, înlocuind valoarea de 0.2 pe cont propriu.

Exemplul 2. Gradient peste text

HTML5 CSS3 IE 8 IE 9+ CR OP SA FX

Un arpeggio intradiscree transformă un polimer, acesta este o singură etapă verticală într-un țesut polifonic ultra-agricol.

Această metodă nu funcționează în browserul Internet Explorer la versiunea 8.0 inclusiv, deoarece nu acceptă gradienți. Dar puteți abandona CSS3 și puteți face un gradient în modul vechi, prin imaginea în format PNG-24.

Această metodă este combinată numai cu un fundal monofonic și în cazul unei imagini de fundal, un gradient asupra textului se va grăbi în ochi.

Punct la sfârșitul textului

În loc de un gradient la capătul textului tăiat, puteți folosi și un punct. Mai mult decât atât, acesta va fi adăugat automat utilizând proprietatea textului. El înțelege toate browserele, inclusiv versiunile mai vechi ale IE, iar singurul dezavantaj al acestei proprietăți este încă statutul său obscur. În CSS3, se pare că această proprietate include, dar codul nu este supus validării.

În Exemplul 3, aplicarea proprietății de depășire a textului cu valoarea elipsei, care adaugă un punct a fost afișată. Când deplasați cursorul mouse-ului pe text, acesta este afișat în întregime și este evidențiat de fundal.

Exemplul 3. Utilizarea textului-overflow

HTML5 CSS3 adică CR OP SA FX

Inconștientul cauzează contrastul, este indicat de Ross ca o eroare fundamentală a atribuției, care este urmărită în multe experimente.

Rezultatul acestui exemplu este prezentat în fig. 3.

Smochin. 3. Text cu punct

Big plus din aceste metode este momentul în care gradientul și plictisitorul nu sunt afișate dacă textul este scurt și complet plasat în zona specificată. Deci textul va fi afișat ca de obicei atunci când este complet vizibil pe ecran și se taie într-o scădere a lățimii elementului.