Kako su ponekad iritantni dugi nazivi veza proizvoda - po tri retka - ili dugi naslovi drugih blokova. Kako bi bilo sjajno kada bi se cijela ova stvar mogla nekako suziti, učiniti kompaktnijom. I kada prijeđete mišem preko njega, pokažite naslov u cijelosti.

Za to će nam u pomoć priskočiti naš omiljeni CSS. Vrlo je jednostavno, pogledajte.

Recimo da imamo ovakav blok iz kataloga proizvoda:

Ovo je njegova struktura:

Evo njegovih stilova:

Someblock( border: 1px solid #cccccc; margin: 15px auto; padding: 10px; width: 250px; ) .header( border-bottom: 1px crtkano; font-size: 16px; font-weight: podebljano; margin-bottom: 12px ;)

Slažem se, izgleda užasno. Naravno, možete skratiti naziv proizvoda. Ali što ako ih ima na stotine ili tisuće? Također možete upotrijebiti PHP da biste skratili dio imena, ograničavajući ga na određeni broj znakova. Ali što ako se izgled kasnije promijeni i blokovi su manji ili, naprotiv, 2-3 puta veći? Ništa od ovoga nije opcija, ništa od ovoga nam ne odgovara.

I tu nam u pomoć priskače CSS i njegovo čarobno svojstvo tekst-preljev. Ali treba ga koristiti ispravno u kombinaciji s nekoliko drugih svojstava. U nastavku ću vam pokazati već gotovo rješenje, nakon čega ću objasniti što je što.

Dakle, ostavljajući po strani ručno uređivanje naziva proizvoda i programsko obrezivanje stilova, preuzimamo CSS u svoje ruke i vidimo što ćemo dobiti:

Miracle Yudo večer moć darivatelj, misteriozan, art. 20255-59

Prekrasan proizvod po super cijeni, samo 100 rubalja. Uljepšat će vaše usamljene večeri i dati vam nalet vitalnosti!

Pa, je li bolje? Po mom mišljenju, itekako! I prijeđite mišem preko naslova... voila! Ovdje nam je prikazan u cijelosti.

Ništa se nije promijenilo u našoj strukturi, samo sam dodao divu s klasom .Zaglavlje naslovna oznaka. A evo i novih, ažuriranih stilova:

Someblock( border: 1px solid #cccccc; margin: 15px auto; padding: 10px; width: 250px; ) .header( border-bottom: 1px crtkano; font-size: 16px; font-weight: podebljano; margin-bottom: 12px ; overflow: skriveno; text-overflow: elipsa; white-space: nowrap; )

Pogledajte što smo napravili:

• Dodali smo nekretninu u blok bjelina: nowrap, što uklanja mogućnost teksta da prelama riječi nova linija, čime ga povlačite u liniju;
• Zatim smo dodali nekretninu preljev: skriven, koji je ograničio vidljivost naše linije na širinu bloka, čime je odsjekao sve nepotrebno i ne pokazao ga posjetitelju;
• Pa, na kraju smo dodali elipsu našem retku pomoću svojstva text-overflow: elipsa, čime je posjetitelj shvatio da ovo nije kraj te da vjerojatno treba podići miš i pogledati ga u cijelosti.

Volite CSS, naučite CSS, a izrada web stranice neće vam se činiti tako teškom =)

Vjerojatno su se mnogi ljudi susreli s problemom kada neki tekst treba prikazati u jednom retku. Štoviše, tekst može biti prilično dug, a širina bloka u kojem se taj tekst nalazi obično je ograničena barem na istu veličinu prozora preglednika. Za ove slučajeve izmišljeno je svojstvo text-overflow, koje je uključeno u preporuku CSS3, a prvi put je implementirano u IE6, vrlo davno. Kada koristite ovo svojstvo za blok, ako je njegov tekst širi od samog bloka, tada se tekst odrezuje i na kraju se postavlja elipsa. Iako ovdje nije sve tako jednostavno, na ovo ćemo se vratiti malo kasnije.
S Internet Explorerom je sve jasno, što je s drugim preglednicima? Iako je svojstvo text-overflow trenutno isključeno iz CSS3 specifikacije, Safari ga podržava (prema barem, u verziji 3), Opera također (od verzije 9, iako se svojstvo zove -o-overflow-text). Ali Firefox to ne podržava, ne podržava, pa čak ni u verziji 3 neće. Tužno ali istinito. Ali možda se nešto može učiniti?

Naravno, može se. Kad sam na internetu tražio ovo svojstvo i kako to učiniti u Firefoxu, naišao sam jednostavno rješenje. Suština rješenja:

To je sve. Za detalje pročitajte članak.
Rješenje nije loše, ali ima problema:

1. Tekst može biti odsječen u sredini (uslovno rečeno) slova, pa ćemo vidjeti njegov “panj”.
2. Elipsa se uvijek prikazuje, čak i kada je tekst manji od širine bloka (odnosno, ne ispada iz njega i elipsa nije potrebna).

Prvi korak

Prvo se usredotočimo na drugi problem, naime kako izbjeći prikaz elipse kada nije potrebna. Nakon što sam razbio glavu i "malo" eksperimentirao, pronašao sam rješenje. Pokušat ću objasniti.
Poanta je da nam treba poseban blok s elipsom koji će se pojaviti samo kada tekst zauzima previše prostora u širini. Onda sam došao na ideju padajućeg plutajućeg bloka. Iako zvuči zastrašujuće, to samo znači blok koji je uvijek tu i pritisnut udesno, ali kada širina teksta postane velika, tekst gura blok u sljedeći red.
Prijeđimo na praksu, inače je teško objasniti. Postavimo HTML struktura:

vrlo dugačak tekst

Nije baš kompaktan, ali nisam mogao napraviti ništa manje. Dakle, imamo blok spremnika DIV.ellipsis, blok s našim tekstom i drugi blok koji će sadržavati elipsu. Imajte na umu da je "blok elipse" zapravo prazan, jer nam ne trebaju dodatne tri točke kada kopiramo tekst. Također, nemojte se uznemiriti zbog nedostatka dodatnih klasa, budući da se ova struktura dobro rješava pomoću CSS selektora. A evo i samog CSS-a:

.ellipsis ( overflow: skriveno; white-space: nowrap; line-height: 1.2em; height: 1.2em; border: 1px full red; ) .ellipsis > DIV:first-child ( float: left; ) .ellipsis > DIV + DIV ( float: desno; margin-top: -1.2em; ).elipsa >

To je sve. Provjeravamo i uvjeravamo se da radi kako treba u Firefoxu, Operi, Safariju. U IE postoji vrlo čudan, ali predvidljiv rezultat. U IE6 sve je nestalo, ali u IE7 jednostavno ne radi, jer ne podržava generirani sadržaj. Ali kasnije ćemo se vratiti na IE.

Za sada, pogledajmo što smo napravili. Prvo postavljamo visinu retka i visinu glavnog bloka, budući da moramo znati visinu bloka i visinu retka teksta. Postavili smo istu vrijednost za rubni vrh bloka s elipsom, ali s negativnom vrijednošću. Dakle, kada se blok ne “resetira” na sljedeći redak, bit će iznad retka teksta (jedan redak), kada se resetira, bit će na svojoj razini (zapravo, niže je, samo ga povučemo jedan red gore). Kako bismo sakrili nepotrebne stvari, pogotovo kada nema potrebe za prikazom elipse, napravimo overflow: hidden za glavni blok, tako da kada je elipsa iznad crte, neće biti prikazana. To nam također omogućuje uklanjanje teksta koji pada izvan bloka (na desni rub). Kako bismo spriječili neočekivano prelamanje teksta i guranje bloka s elipsom sve niže i niže, napravimo white-space: nowrap, čime zabranjujemo crtice - naš će tekst uvijek biti u jednom retku. Za blok s tekstom postavili smo float: lijevo kako ne bi odmah skupio blok s elipsom i zauzeo minimalnu širinu. Budući da unutar glavnog bloka (DIV.ellipsis) oba bloka lebde (float: lijevo/desno), glavni blok će se srušiti kada je tekstualni blok prazan, tako da smo za glavni blok postavili fiksnu visinu (visina: 1.2em) . I na kraju, koristimo pseudoelement ::after za prikaz elipse. Za ovaj pseudoelement također smo postavili pozadinu koja će prekriti tekst koji će se pojaviti ispod njega. Postavili smo okvir za glavni blok samo da vidimo dimenzije bloka; kasnije ćemo ga ukloniti.
Ako Firefox podržava pseudo-elemente, kao i Opera i Safari u smislu njihovog pozicioniranja (postavljanje položaja/plutanja itd. za njih), tada bi bilo moguće ne koristiti zasebni blok za elipsu. Pokušajte zamijeniti zadnja 3 pravila sljedećim:

.ellipsis > DIV:first-child::after ( float: desno; content: "..."; margin-top: -1.2em; background-color: white; position: relative; )

u Operi i Safariju sve radi kao i prije i bez dodatnog bloka elipse. Ali Firefox je razočaravajući. Ali mi odlučujemo za njega. Pa, morat ćete se zadovoljiti izvornom HTML strukturom.

Drugi korak

Kao što ste možda primijetili, riješili smo se problema pojavljivanja elipsa kada tekst stane u blok. Ipak, imamo još jedan problem - tekst je odsječen u sredini slova. Osim toga, ne radi u IE. Da biste prevladali oboje, trebate koristiti izvorno pravilo prelijevanja teksta za preglednike, a samo za Firefox koristiti gore opisano rješenje (nema alternative). Kasnije ćemo smisliti kako napraviti rješenje "samo za Firefox", ali sada pokušajmo učiniti da ono što imamo radi pomoću text-overflow-a. Ugodimo CSS:

.ellipsis (preljev: skriven; razmak: nowrap; visina linije: 1,2 em; visina: 1,2 em; obrub: 1px puno crveno; text-overflow: elipsa; -o-text-overflow: elipsa; širina: 100%; } .elipsa * (prikaz: inline; ) /*.ellipsis > DIV:prvo dijete ( float: lijevo; ) .ellipsis > DIV + DIV ( float: desno; margin-top: -1.2em; ) .ellipsis > DIV + DIV::after ( boja pozadine: bijela; sadržaj: "..."; ) */

Kako se pokazalo, nema se što puno urediti. Tri retka dodana su stilu glavnog bloka. Dvije od njih uključuju text-overflow. Vježbajte širina širina: 100% potrebno za IE tako da tekst ne širi blok u beskonačnost, a svojstvo text-overflow radi; U biti, ograničili smo širinu. U teoriji, DIV se, kao i svi blok elementi, proteže cijelom širinom spremnika, a width: 100% je beskoristan, pa čak i štetan, ali IE ima problem s rasporedom, jer se spremnik uvijek rasteže kako bi odgovarao sadržaju, pa nema drugog načina. Također smo napravili sve interne elemente inline, jer za neke preglednike (Safari & Opera) text-overflow inače neće raditi, budući da unutra postoje blok elementi. Zadnja tri pravila smo komentirali, jer u ovom slučaju nisu potrebna i krše sve (konflikt). Ova će pravila biti potrebna samo za Firefox.
Pogledajmo što imamo i nastavimo.

Treći korak

Kada sam još jednom pogledao stranicu (prije nego što sam namjeravao napisati ovaj članak) spomenutu na samom početku, tada sam iz znatiželje pretražio komentare tražeći pametne srodne ideje. I našao sam ga u komentaru koji je govorio o drugom rješenju koje radi u Firefoxu i IE (za ovu osobu, kao i za autora prvog članka, očito ne postoje drugi preglednici). Dakle, u ovom rješenju autor se ovim fenomenom (nedostatkom text-overflow-a) bavi na nešto drugačiji način, dodajući handlere overflow i underflow događajima na elemente za koje je po potrebi bilo potrebno staviti elipsu. Nije loše, ali čini mi se da je ovo rješenje vrlo skupo (što se tiče resursa), pogotovo jer je pomalo glitch. No dok je smišljao kako je to postigao, naišao je na zanimljivu stvar, naime CSS svojstva o -moz-vezivanje. Koliko ja razumijem, ovo je analogija ponašanja u IE, samo s drugačijim umakom i hladnjakom. No, nećemo ulaziti u detalje, recimo samo da na ovaj način elementu možete priložiti JavaScript rukovatelj s koristeći CSS. Zvuči čudno, ali djeluje. Što radimo:

.ellipsis ( overflow: skriveno; white-space: nowrap; line-height: 1.2em; height: 1.2em; border: 1px full red; text-overflow: ellipsis; -o-text-overflow: ellipsis; width: 100% ; -moz-vezivanje: url(moz_fix.xml#ellipsis); zumiranje: 1;) .elipsa * ( prikaz: umetnuto; ) .moz-elipsa > DIV:prvo dijete( float: lijevo; prikaz: blok; } .moz-elipsa > DIV + DIV( float: desno; margin-top: -1.2em; prikaz: blok; } .moz-elipsa > DIV + DIV::nakon(boja pozadine: bijela; sadržaj: "..."; )

Kao što vidite, ponovno nismo napravili mnogo promjena. Na ovom koraku u IE7 postoji čudan problem, sve je iskrivljeno ako ne postavite zumiranje: 1 za glavni blok (najjednostavnija opcija). Ako uklonite (izbrišete, komentirate) pravilo .ellipsis * ili .moz-ellipsis > DIV + DIV (što uopće ne utječe na IE7), tada greška nestaje. Ovo je sve čudno, ako netko zna što nije u redu neka mi javi. Za sada ćemo se zadovoljiti zoom: 1 i prijeći na Firefox.
Svojstvo -moz-binding uključuje datoteku moz_fix.xml s uputama s elipsom identifikatora. Sadržaj ovoga xml datoteka sljedeće:

Sve što ovaj konstruktor radi je dodavanje klase moz-ellipsis elementu za koji je selektor radio. Ovo će raditi samo u Firefoxu (gecko preglednici?), tako da će samo u njemu klasa moz-ellipsis biti dodana elementima, a možemo dodati dodatna pravila. To su htjeli. Nisam posve siguran u potrebu za this.style.mozBinding = “”, ali iz iskustva s izražavanjem, bolje je biti na sigurnoj strani (općenito, nisam baš upoznat s ovom stranom Firefoxa, pa mogao bih se zabuniti).
Možda ćete biti zabrinuti jer ova tehnika koristi vanjsku datoteku i JavaScript općenito. Ne treba se bojati. Prvo, ako se datoteka ne učitava i/ili je JavaScript onemogućen i ne radi, u redu je, korisnik jednostavno neće vidjeti elipsu na kraju, tekst će biti odrezan na kraju bloka. To jest, u ovom slučaju dobivamo "nenametljivo" rješenje. Vidite i sami.

Tako smo dobili stil za "Big Four" preglednike, koji implementira text-overflow za Operu, Safari & IE, i emulira ga za Firefox, ne baš dobro, ali bolje je nego ništa.

Četvrti korak

Mogli bismo stati na kraj ovoj točki, ali bismo htjeli malo poboljšati naše rješenje. Budući da možemo pričvrstiti konstruktor na bilo koji blok i, sukladno tome, dobiti kontrolu nad njim, zašto ne bismo iskoristili ovu prednost. Pojednostavimo našu strukturu:

vrlo dugačak tekst

O da! Mislim da ćete se složiti sa mnom - ovo je ono što vam treba!
Uklonimo sada sve nepotrebne stvari iz stila:

.ellipsis ( overflow: skriveno; white-space: nowrap; line-height: 1.2em; height: 1.2em; text-overflow: ellipsis; -o-text-overflow: ellipsis; width: 100%; -moz-binding: url(moz_fix.xml#ellipsis); ) .moz-ellipsis > DIV:prvo dijete ( float: lijevo; ) .moz-ellipsis > DIV + DIV ( float: desno; margin-top: -1.2em; ) .moz -elipsa > DIV + DIV::nakon (boja-pozadine: bijela; sadržaj: "..."; )

Napokon smo uklonili crveni rub :)
Sada, dodajmo malo našem moz_fix.xml:

Što se ovdje događa? Ponovno stvaramo našu početnu HTML strukturu. Odnosno, te poteškoće s blokovima rade se automatski, i to samo u Firefoxu. JavaScript kod je napisan u najboljim tradicijama :)
Nažalost, ne možemo izbjeći situaciju da je tekst odsječen na sredini slova (iako, možda privremeno, jer je moje rješenje još uvijek vrlo grubo, a moglo bi funkcionirati u budućnosti). Ali možemo malo ublažiti ovaj učinak. Da bismo to učinili potrebna nam je slika (bijela pozadina s prozirnim gradijentom) i nekoliko promjena u stilu:

.moz-elipsa > DIV:prvo dijete ( float: lijevo; margina-desno: -26px;) .moz-elipsa > DIV + DIV ( float: desno; margin-top: -1.2em; pozadina: url(ellipsis.png) repeat-y; padding-left: 26px; }

Gledajmo i uživajmo u životu.

Stavimo to na kraj.

Zaključak

Dat ću vam mali primjer za izgled treće strane. Uzeo sam sadržaj jedne od stranica Wikipedije (prve koja se pojavila) i na njega primijenio gore opisanu metodu.
Općenito ovu odluku može se samo s natezanjem nazvati univerzalnim. Sve ovisi o vašem izgledu i njegovoj složenosti. Možda će vam trebati turpija, ili možda tambura. Iako u većini slučajeva, mislim da će uspjeti. I onda, sada imate početnu točku ;)
Nadam se da ste iz članka naučili nešto zanimljivo i korisno;) Učite, eksperimentirajte, dijelite.
Sretno!

Postoji tekst proizvoljne duljine koji treba prikazati unutar bloka fiksne visine i širine. U tom slučaju, ako tekst ne stane u potpunosti, treba prikazati dio teksta koji u potpunosti stane u zadani blok, nakon čega se postavlja elipsa.

Ovaj zadatak je prilično uobičajen, ali u isto vrijeme nije tako trivijalan kao što se čini.

Opcija za jednoredni tekst u CSS-u

U ovom slučaju možete koristiti svojstvo text-overflow: ellipsis. U ovom slučaju spremnik mora imati svojstvo prelijevanje jednak skriven ili isječak

Blok (širina: 250px; razmak: nowrap; overflow: skriven; text-overflow: elipsa;)

Opcija za višeredni tekst u CSS-u

Prvi način skraćivanja višerednog teksta je s koristeći CSS svojstva primjenjuju pseudoelemente :prije I :nakon. Započnimo s HTML označavanjem

A sada sama svojstva

Box ( overflow : hidden ; height : 200px ; width : 300px ; line-height : 25px ; ) .box :before ( content : "" ; float : left ; width : 5px ; height : 200px ;) .box > * :first -dijete ( float : desno ; širina : 100% ; margin-left : -5px ; ) .box :after ( content : "\02026" ; box-sizing : content-box ; float : desno ; position : relative ; top : -25px; lijevo: 100%; širina: 3em; margina-lijevo: -3em; padding-desno: 5px; poravnanje teksta: desno; veličina pozadine: 100% 100%; pozadina: linearni gradijent (desno, rgba (255 , 255 , 255 , 0 ), bijela 50 % , bijela ); )

Drugi način je korištenje svojstva column-width, s kojim postavljamo širinu stupca za višeredni tekst. Međutim, kada koristite ovu metodu, neće biti moguće postaviti elipsu na kraju. HTML:

Blok (overflow: skriven; visina: 200px; širina: 300px;) .block__inner (-webkit-column-width: 150px; -moz-column-width: 150px; column-width: 150px; visina: 100%;)

Postoji treći način rješavanja višerednog teksta pomoću CSS-a za preglednike Webkit. U njemu ćemo morati koristiti nekoliko specifičnih svojstava s prefiksom -webkit. Glavni je -webkit-line-clamp koji vam omogućuje da odredite broj redaka koji će se ispisati u bloku. Rješenje je lijepo, ali prilično ograničeno zbog rada u ograničenoj skupini preglednika

Blok (overflow: skriveno; text-overflow: elipsa; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: okomito;)

Opcija za višeredni tekst u JavaScriptu

Ovdje se koristi dodatni nevidljivi blok, u koji se inicijalno stavlja naš tekst, nakon čega se uklanja jedan po jedan znak dok visina tog bloka ne postane manja ili jednaka visini željeni blok. I na kraju se tekst premješta u izvorni blok.

var block = dokument. querySelector(".block"), tekst = blok. innerHTML, klon = dokument. createElement("div"); klon stil. položaj = "apsolutno" ; klon stil. vidljivost = "skriveno" ; klon stil. širina = blok. clientWidth + "px" ; klon unutarnjiHTML = tekst; dokument. tijelo. appendChild(klon); var l = tekst. duljina - 1; za (; l >= 0 && clone. clientHeight > block. clientHeight; -- l) (klon. innerHTML = text. substring (0, l) + "...";) block. unutarnjiHTML = klon. unutarnjiHTML;

Ovo je isto kao dodatak za jQuery:

(funkcija ($) ( var truncate = funkcija (el) ( var tekst = el . tekst (), visina = el . visina (), klon = el . klon (); klon . css (( pozicija : "apsolutno" , vidljivost : "skriveno", visina : "automatski" )); el . nakon (klon); var l = tekst . dužina - 1 ; za (; l >= 0 && klon . visina () > visina ; -- l ) ( klon . tekst ( tekst . podniz ( 0 , l ) + "..." ); ) el . tekst ( klon . tekst ()); klon . uklanjanje (); ); $ . fn . truncateText = funkcija () ( return this . each (function () ( truncate ($ (this )); )); ) (jQuery ));

Definira parametre vidljivosti teksta u bloku ako cijeli tekst ne stane u navedeno područje. Postoje dvije mogućnosti: tekst je odrezan; tekst je odrezan i na kraj retka je dodana elipsa. text-overflow radi ako je svojstvo overflow bloka postavljeno na auto, scroll ili hidden.

kratka informacija

Oznake

	Opis	Primjer
<тип>	Označava vrstu vrijednosti.	<размер>
A & & B	Vrijednosti se moraju ispisati navedenim redoslijedom.	<размер> && <цвет>
A | B	Označava da trebate odabrati samo jednu vrijednost od predloženih (A ili B).	normalno | malim slovima
A || B	Svaka se vrijednost može koristiti samostalno ili zajedno s drugima bilo kojim redoslijedom.	širina || računati
	Vrijednosti grupa.	[ obrezivanje || križ ]
*	Ponovite nula ili više puta.	[,<время>]*
+	Ponovite jednom ili više puta.	<число>+
?	Navedena vrsta, riječ ili grupa nisu obavezni.	umetak?
(A, B)	Ponovite najmanje A, ali ne više od B puta.	<радиус>{1,4}
#	Ponovite jednom ili više puta odvojene zarezima.	<время>#

×

Vrijednosti

isječak Tekst je izrezan kako bi odgovarao području. elipsa Tekst se skraćuje i na kraj retka se dodaje elipsa.

Primjer

Magnetsko polje zanemarivo prigušuje veliki krug nebeske sfere, pri čemu se povećavaju ekscentricitet i nagibi orbita.

Proizlaziti ovaj primjer prikazano na sl. 1.

Riža. 1. Elipsa na kraju teksta

Objektni model

Objekt.style.textOverflow

Bilješka

Opera prije verzije 11 koristi svojstvo -o-text-overflow.

Specifikacija

Svaka specifikacija prolazi kroz nekoliko faza odobravanja.

• Preporuka - Specifikaciju je odobrio W3C i preporučuje se kao standard.
• Preporuka kandidata ( Moguća preporuka) - grupa odgovorna za standard je zadovoljna da on ispunjava svoje ciljeve, ali joj je potrebna pomoć razvojne zajednice za implementaciju standarda.
• Predložena preporuka Predložena preporuka) - u ovoj fazi dokument se podnosi Savjetodavnom vijeću W3C na konačno odobrenje.
• Radni nacrt - zrelija verzija nacrta o kojoj se raspravljalo i dopunjena radi pregleda zajednice.
• Urednikov nacrt ( Urednički nacrt) - nacrt verzije standarda nakon izmjena koje su izvršili urednici projekta.
• Nacrt ( Nacrt specifikacije) - prva verzija nacrta standarda.

×