Dodavanje elipse na kraju teksta može se postići na više načina, a na raspolaganju su nam css i js.
Prvo, pogledajmo problem. Postoji oznaka blokova
- Puno zanimljivog teksta o stilovima, izgledu, programiranju i još mnogo zanimljivih stvari o web stranicama
- Ali kako možemo staviti elipsu ako ne možemo ograničiti veličinu bloka?
- Što kažete na js skriptu? On to može, zar ne?
- Hmm, definitivno može. Ovdje zadržite kod, on će brojati Unicode znakove i smanjiti ako je potrebno
Sada morate postići učinak odsijecanja teksta u svakom elementu popisa, uz to morate dodati elipsu.
Skraćivanje css tekstaDa bismo to učinili, stvorimo stil za razred sisa
.sisa (
razmak: nowrap; /* Otkaži prelamanje teksta */
preljev: skriven; /* Obrežite sadržaj */
ispuna: 5px; /* Polja */
text-overflow: elipsa; /* Elipsa */
}
Osobitost ovog rješenja je da ako tekst stane unutar veličine bloka, tada se elipsa neće dodati. Što nije uvijek rješenje problema.
Najčešće je potrebno skratiti tekst na njegovu duljinu i tek onda dodati točke.
Tu su i zadaci kada je u svakom slučaju potrebno dodati točke (koliko god tekst bio dugačak, minimalno 3 slova). A ako je tekst duži od određene veličine, tada ga treba obrezati. U ovom slučaju potrebno je koristiti skripte.
naziv funkcije() (
var elem, veličina, tekst;
var elem = document.getElementsByClassName("tit");
var text = elem.innerHTML;
promjenljiva veličina = 75;
var n = 70;
for(var i = 0; i< elem.length; i++) { /* необходимо вставить цикл, чтоб получить все блоки с классом tit */
if(elem[i].innerHTML.length > veličina) (
tekst = elem[i].innerHTML.substr(0,n);
}
drugo(
tekst = elem[i].unutarnjiHTML;
}
elem[i].unutarnjiHTML = tekst + "...";
}
}
titula();
Kažemo skripti koje elemente treba obraditi.
Da biste to učinili, u retku var elem = document.getElementsByClassName("tit"); označite klasu elementa (mora biti ista).
Zatim trebate postaviti veličinu teksta prije nego što ga izrežete. Ovo su naši kratki stihovi kojima će biti dodana elipsa. Za to je odgovorna varijabla var size = 75;
Sada bi skripta trebala proći kroz sve elemente sa traženom klasom i dodati elipsu.
Skripta provjerava duljinu svakog retka i skraćuje tekst ako prelazi 75 znakova. Ako je duljina manja, tada se jednostavno dodaje elipsa (redak if(elem[i].innerHTML.length > size)).
Skriptu možete vidjeti na djelu na demo stranici. To je sve, sada znate kako obrezati dugačak tekst različitim metodama.
Vlad Merzhevich
Unatoč činjenici da su monitori velike dijagonale sve pristupačniji i da im se razlučivost stalno povećava, ponekad se pojavi zadatak smjestiti puno teksta na ograničeni prostor. Na primjer, ovo može biti potrebno za mobilna verzija mjesto ili za sučelje u kojem je bitan broj redaka. U takvim slučajevima ima smisla obrezati duge retke teksta, ostavljajući samo početak rečenice. Na taj način ćemo sučelje dovesti u kompaktan oblik i smanjiti količinu prikazanih informacija. Samo skraćivanje redaka može se obaviti na strani poslužitelja koristeći isti PHP, ali je lakše kroz CSS, a uvijek možete prikazati cijeli tekst, na primjer, kada prijeđete pokazivačem miša preko njega. Zatim ćemo pogledati metode rezanja teksta zamišljenim škarama.
U stvarnosti, sve se svodi na korištenje svojstva overflow s vrijednošću hidden. Razlike leže samo u različitom prikazu našeg teksta.
Korištenje preljevaKako bi se svojstvo overflow pokazalo s tekstom u punom sjaju, morate razmotati tekst koristeći razmak s vrijednošću nowrap. Ako se to ne učini, neće doći do željenog efekta; tekstu će biti dodane crtice i prikazat će se cijeli tekst. Primjer 1 pokazuje kako skratiti dugačak tekst s određenim skupom svojstava stila.
Primjer 1. preljev za tekst
HTML5 CSS3 IE Cr Op Sa Fx
Text .size ( white-space: nowrap; /* Otkaži prelamanje teksta */ overflow: hidden; /* Izreži sadržaj */ pozadina: #fc0; /* Boja pozadine */ padding: 5px; /* Margine */ )
Rezultat ovog primjera prikazan je na sl. 1.
Riža. 1. Izgled teksta nakon primjene svojstva overflow
Kao što se može vidjeti sa slike, općenito postoji jedan nedostatak - nije očito da tekst ima nastavak, pa korisnik mora biti svjestan toga. To se obično radi pomoću gradijenta ili elipse.
Dodavanje gradijenta tekstuKako bi bilo jasnije da tekst s desne strane ne završava, možete staviti gradijent na njegov vrh od prozirna boja na boju pozadine (slika 2). To će stvoriti učinak postupnog rastvaranja teksta.
Riža. 2. Gradijent teksta
Primjer 2 pokazuje kako stvoriti ovaj efekt. Stil samog elementa ostat će praktički isti, ali ćemo dodati sam gradijent pomoću pseudoelementa ::after i CSS3. Da bismo to učinili, umetnemo prazan pseudoelement kroz svojstvo sadržaja i na njega primijenimo gradijent s različitim prefiksima za glavne preglednike (primjer 2). Širina gradijenta može se jednostavno promijeniti pomoću širine, također možete prilagoditi stupanj prozirnosti zamjenom vrijednosti 0,2 svojom vlastitom.
Primjer 2: Gradijent preko teksta
HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx
Text .size ( white-space: nowrap; /* Otkaži prelamanje teksta */ overflow: hidden; /* Izreži sadržaj */ padding: 5px; /* Margine */ background: #fc0; /* Boja pozadine */ položaj: relativan ; /* Relativno pozicioniranje */ ) .size::after ( content: ""; /* Izlaz elementa */ position: absolute; /* Apsolutno pozicioniranje */ desno: 0; top: 0; /* Položaj elementa */ širina : 40px; /* Širina gradijenta*/ visina: 100%; /* Visina roditelja */ /* Gradijent */ pozadina: -moz-linear-gradient(lijevo, rgba(255,204,0, 0.2), #fc0 100%) ; pozadina: -webkit-linear-gradient(lijevo, rgba(255,204,0, 0.2), #fc0 100%); pozadina: -o-linearni-gradijent(lijevo, rgba(255,204,0, 0.2), #fc0 100 %); pozadina: -ms-linearni-gradijent(lijevo, rgba(255,204,0, 0.2), #fc0 100%); pozadina: linearni-gradijent(desno, rgba(255,204,0, 0.2), #fc0 100 %)); )
Intra-diskretni arpeggio transformira poliseriju; ovo je jednokratna vertikala u superpolifonoj tkanini.
Ova metoda ne radi u pregledniku Internet Explorer do inačice 8.0 uključivo, jer ne podržava gradijente. Ali možete napustiti CSS3 i napraviti gradijent na staromodan način, kroz sliku u PNG-24 formatu.
Ova se metoda može kombinirati samo s obična pozadina a u slučaju pozadinske slike bit će uočljiv gradijent na vrhu teksta.
Elipsa na kraju tekstaTakođer možete koristiti elipsu na kraju izrezanog teksta umjesto gradijenta. Štoviše, automatski će se dodati korištenjem svojstva text-overflow. Razumiju ga svi preglednici, uključujući i starije verzije IE-a, a jedina mana ovog svojstva je da je trenutno nejasan status. Čini se da CSS3 uključuje ovo svojstvo, ali kod s njim ne prolazi provjeru valjanosti.
Primjer 3 prikazuje upotrebu svojstva text-overflow s vrijednošću ellipsis, koja dodaje elipsu. Kada mišem prijeđete preko teksta, on se prikazuje u cijelosti i označava bojom pozadine.
Primjer 3: Korištenje text-overflow-a
HTML5 CSS3 IE Cr Op Sa Fx
Text .size ( white-space: nowrap; /* Otkaži prelamanje teksta */ overflow: hidden; /* Crop content */ padding: 5px; /* Margine */ text-overflow: ellipsis; /* Ellipsis */ ) .size :hover ( background: #f0f0f0; /* Boja pozadine */ white-space: normal; /* Normalno prelamanje teksta */ ) Nesvjesno uzrokuje kontrast, Lee Ross to identificira kao temeljnu pogrešku atribucije, koja se može vidjeti u mnogo eksperimenata.
Rezultat ovog primjera prikazan je na sl. 3.
Riža. 3. Tekst s elipsama
Velika prednost ovih metoda je u tome što se gradijent i elipse ne prikazuju ako je tekst kratak i u potpunosti se uklapa u određeno područje. Dakle, tekst će biti prikazan kao i obično kada je potpuno vidljiv na ekranu i bit će odrezan kada se širina elementa smanji.
Pozdrav svima, moje ime je Anna Blok i danas ćemo govoriti o tome kako izrezati slike bez upotrebe grafičkih programa.
Gdje ovo može biti korisno?Prije svega, na web stranicama gdje sadržaj sa slikama najvjerojatnije neće biti izrezan ni za jedan određeni blok.
Upečatljiv primjer: blog na WordPressu.
Recimo da želite da naslovnica vašeg članka ima omjer širine i visine 1:1 (kvadrat). Vaše akcije:
Kada posjetite stranicu, vidjet ćete rezultat koji ste očekivali.
No, pretpostavimo da ste zaboravili izrezati sliku u Photoshopu i skinuli slučajnu sliku kao naslovnicu s interneta, što će se tada dogoditi?! Tako je, raspored će se pokvariti. A ako uopće niste koristili CSS, onda HD slika može potpuno blokirati cijeli prikaz teksta. Stoga je važno moći izrezati slike kada CSS pomoć stilovi.
Pogledajmo različite situacije kako se to može implementirati ne samo pomoću CSS-a, već i SVG-a.
Pokušajmo izrezati sliku koja je postavljena pomoću pozadinske slike. Kreirajmo malo HTML oznake
Prijeđimo na CSS stiliziranje. Korištenjem pozadinske slike dodajemo sliku, određujemo okvire za našu sliku, centriramo sliku pomoću pozadinske pozicije i postavljamo veličinu pozadine:
jpg); background-position:centar center; veličina pozadine: naslovnica; širina:300px; visina:300px; )
Ovo je bila prva i najjednostavnija metoda za obrezivanje slike. Sada pogledajmo drugi primjer.
Pretpostavimo da još uvijek imamo isti spremnik okvira unutar kojeg se nalazi img tag sa slikom koju ćemo sada stilizirati.
Također ćemo centrirati našu sliku u odnosu na objekt koji ćemo izraditi. I mi koristimo svojstvo koje se prilično rijetko koristi: object-fit.
Box (position: relative; overflow:hidden; width:300px; height:300px; ) .box img (position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:300px; height:300px; object-fit:cover; )
Po mom mišljenju ovo je najbolja metoda. Idealan je za blogove ako za postove koristite slike potpuno različitih proporcija.
Ovdje možete saznati više o HTML-u i CSS-u:
Trenutačno možemo kreirati i obrezivanje slika ako ih umetnemo u SVG elemente. Uzmimo krug kao primjer. SVG možemo stvoriti pomoću oznaka. Napravite svg rubnu oznaku koja će unutar sebe sadržavati oznaku kruga i oznaku uzorka. U oznaku uzorka upisujemo oznaku slike. U njemu specificiramo atribut xlink:href i dodamo sliku. Također ćemo dodati atribute širine i visine. Ali to nije sve. Morat ćemo dodati vrijednost punjenja. Da bi se naš rad smatrao dovršenim, dodat ćemo pomoćni atribut SaveAspectRatio u oznaku slike, koji će nam omogućiti da našu sliku ispunimo "od početka do kraja" oko cijelog kruga.
Ovu metodu ne mogu nazvati univerzalnom. Ali može se koristiti u iznimnim slučajevima. Na primjer, ako smo se dotakli teme bloga, onda bi se ova metoda mogla idealno uklopiti u avatar autora koji piše članak.
Ovdje možete saznati više o HTML-u i CSS-u:
Rezultati:
Pregledali smo 3 metode obrezivanja slika na web-mjestima: korištenje pozadinske slike, korištenje img oznake i povezano sa svg uzorkom s ugradnjom rasterske slike koristeći oznaku slike. Ako znate neke druge metode za obrezivanje slike pomoću SVG-a, podijelite ih u komentarima. Bit će korisno ne samo meni, nego i drugima da znaju o njima.
Ne zaboravite postaviti svoja pitanja o izgledu ili front-end razvoju od profesionalaca na FrontendHelp online.
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-uU 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-uPrvi način skraćivanja višerednog teksta je s koristeći CSS svojstva primjenjuju pseudoelemente :prije I :nakon. Započnimo s HTML označavanjem
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 .
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:
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 .
Blok (overflow: skriven; visina: 200px; širina: 300px;) .block__inner (-webkit-column-width: 150px; -moz-column-width: 150px; column-width: 150px; visina: 100%;)
Treći način rješavanja višerednog teksta pomoću CSS-a je za Webkit preglednike. 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 JavaScriptuOvdje se koristi dodatni nevidljivi blok u koji se inicijalno stavlja naš tekst, nakon čega se uklanja jedan po jedan znak sve dok visina tog bloka ne postane manja ili jednaka visini željenog bloka. 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 ));