Kako izrezati dugi tekst pomoću CSS-a. Izrežite tekst u jednom ili više retka po visini s dodatkom elipsa Dodavanje gradijenta tekstu

Vlad Merzhevich

Unatoč činjenici da su monitori velikih dijagonala sve dostupniji, a njihova razlučivost stalno raste, ponekad se pojavljuje zadatak u ograničenom prostoru da stane puno teksta. Na primjer, to može biti potrebno za mobilnu verziju web-mjesta ili za sučelje gdje je važan broj redaka. U takvim slučajevima ima smisla skratiti duge retke teksta, ostavljajući samo početak rečenice. Tako ćemo sučelje dovesti u kompaktan oblik i smanjiti količinu prikazanih informacija. Stvarno obrezivanje redaka može se obaviti na strani poslužitelja pomoću istog PHP-a, ali preko CSS-a je lakše, štoviše, uvijek možete prikazati cijeli tekst, na primjer, kada zadržite pokazivač miša preko njega. Zatim ćemo razmotriti metode kako izrezati tekst zamišljenim škarama.

Zapravo, sve se svodi na korištenje svojstva overflow sa skrivenom vrijednošću. Razlike su samo u različitom prikazu našeg teksta.

Korištenje preljeva

Da bi se svojstvo preljeva pokazalo s tekstom u punom sjaju, trebate otkazati prelamanje teksta pomoću razmaka s vrijednošću nowrap. Ako se to ne učini, onda efekt koji nam treba neće biti, u tekst će biti dodana crtica i on će se prikazati u cijelosti. Primjer 1 pokazuje kako izrezati dugi tekst s određenim skupom svojstava stila.

Primjer 1.preljev za tekst

HTML5 CSS3 IE Cr Op Sa Fx

Rezultat ovog primjera prikazan je na sl. 1.

Riža. 1. Vrsta teksta nakon primjene svojstva preljeva

Kao što možete vidjeti iz slike, općenito postoji samo jedan nedostatak - nije očito da tekst ima nastavak, pa korisnik mora biti svjestan toga. To se obično radi s gradijentom ili elipsom.

Dodavanje gradijenta u tekst

Kako bi bilo jasnije da tekst s desne strane ne završava, možete ga prekriti gradijentom od prozirne do boje pozadine (slika 2). To će stvoriti učinak postupnog rastvaranja teksta.

Riža. 2. Gradijentni tekst

Primjer 2 pokazuje kako stvoriti ovaj efekt. Stil samog elementa praktički će ostati isti, sam gradijent će se dodati pomoću :: nakon pseudoelementa i CSS3. Da bismo to učinili, kroz svojstvo sadržaja ubacujemo prazan pseudoelement i na njega primjenjujemo gradijent s različitim prefiksima za glavne preglednike (primjer 2). Širina gradijenta može se jednostavno mijenjati kroz širinu, također možete podesiti stupanj transparentnosti zamjenom vrijednosti 0,2 svojom.

Primjer 2. Gradijent preko teksta

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Intra-diskretni arpeggio transformira poli-red, ovo je jednostepena vertikala u ultra-polifonoj tkanini.

Ova metoda ne radi u Internet Exploreru do i uključujući 8.0, jer ne podržava gradijente. Ali možete odustati od CSS3 i napraviti gradijent na staromodan način, koristeći PNG-24 sliku.

Ova metoda radi samo s čvrstom pozadinom, a u slučaju pozadinske slike, gradijent preko teksta bit će upečatljiv.

Elipsa na kraju teksta

Također možete koristiti elipsu umjesto gradijenta na kraju izrezanog teksta. Štoviše, automatski će se dodati pomoću svojstva prelijevanja teksta. Razumiju ga svi preglednici, uključujući starije verzije IE-a, a jedini nedostatak ovog svojstva je njegov još uvijek nejasan status. Čini se da je ovo svojstvo uključeno u CSS3, ali kod s njim ne prolazi provjeru valjanosti.

Primjer 3 pokazuje korištenje svojstva prelivanja teksta s vrijednošću ellipsis, što dodaje elipsu. Kada zadržite pokazivač miša iznad teksta, on se prikazuje u cijelosti i ističe bojom pozadine.

Primjer 3. Korištenje text-overflow

HTML5 CSS3 IE Cr Op Sa Fx

Rezultat ovog primjera prikazan je na sl. 3.

Riža. 3. Tekst s trotočkom

Veliki plus ovih metoda je činjenica da se gradijent i elipsa ne prikazuju ako je tekst kratak i u potpunosti se uklapa u navedeno područje. Dakle, tekst će biti prikazan kao i obično kada je u potpunosti vidljiv na ekranu i izrezan kada se širina elementa smanji.

U nekim slučajevima, sadržaj bloka se prikazuje izvan granica elementa, preklapajući se s njim. Svojstvo overflow koristi se za kontrolu ponašanja elemenata bloka, što određuje kako bi se trebao prikazati sadržaj koji teče izvan bloka.

Koristeći svojstvo clip, možete izrezati element na navedene dimenzije.

1. Svojstvo preljeva

Sadržaj blok elemenata može preplaviti blok kada je visina i/ili širina eksplicitno postavljena za blok. Bez navođenja visine, okvir će se rastegnuti kako bi se prilagodio sadržaju, osim ako okvir nije postavljen na položaj: apsolutni; ili položaj: fiksni; ... Tekst može prelijevati blok po visini, slike - po visini i širini.

2. Svojstvo overflow-x

Svojstvo određuje kako će desni rub sadržaja unutar bloka biti odrezan u slučaju prelijevanja.

Sintaksa:

Div (preljev-x: skriveno;)

3. Svojstvo overflow-y

Svojstvo određuje kako će donji rub sadržaja unutar bloka biti odrezan ako se prelije.

Sintaksa:

Div (preljev-y: skriveno;)

4. Svojstvo isječka

Svojstvo određuje koji će dio elementa biti vidljiv. Dio elementa koji ostaje vidljiv nakon izrezivanja naziva se područje izrezivanja. Izrezivanje se primjenjuje na element koji je u početku potpuno vidljiv. Svojstvo se primjenjuje na elemente koji imaju svojstvo položaja postavljeno na apsolutno ili fiksno.

Postoji tekst proizvoljne duljine koji se mora prikazati unutar bloka fiksne visine i širine. U tom slučaju, ako se tekst ne uklapa u potpunosti, trebao bi se prikazati dio teksta koji se u potpunosti uklapa u navedeni blok, nakon čega se postavlja trotočka.

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

Opcija za tekst u jednom retku u CSS-u

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

Blok (širina: 250px; razmak: sadarap; preljev: skriven; preljev teksta: elipsa;)

Opcija za višeredni CSS tekst

Prvi način za izrezivanje višerednog teksta pomoću CSS svojstava je primjena pseudoelemenata : prije i : poslije... Prvo, HTML označavanje

A sada same nekretnine

Okvir (preljev: skriven; visina: 200px; širina: 300px; visina linije: 25px;) .box: prije (sadržaj: ""; float: lijevo; širina: 5px; visina: 200px;) .box> *: prvi -child (float: desno; širina: 100%; margin-left: -5px;) .box: after (sadržaj: "\ 02026"; box-sizing: content-box; float: desno; položaj: relativan; vrh: -25px; lijevo: 100%; širina: 3em; margin-left: -3em; padding-right: 5px; text-align: desno; background-size: 100% 100%; pozadina: linearni gradijent (udesno, rgba (255, 255, 255, 0), bijela 50%, bijela;)

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

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

Treće rješenje za višeredni tekst u CSS-u je 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 za prikaz u bloku. Rješenje je lijepo, ali prilično ograničeno zbog rada u ograničenoj skupini preglednika

Blok (preljev: skriveno; preljev teksta: elipsa; prikaz: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: okomito;)

JavaScript varijanta za višeredni tekst

Ovdje se koristi dodatni nevidljivi blok u koji se u početku postavlja naš tekst, nakon čega se uklanja jedan po jedan znak sve dok visina ovog bloka ne bude manja ili jednaka visini željenog bloka. I na kraju se tekst pomiče na izvorni blok.

var blok = dokument. querySelector (.block"), tekst = blok. innerHTML, klon = dokument. createElement ("div"); klon. stil. pozicija = "apsolutna"; klon. stil. vidljivost = "skrivena"; klon. stil. širina = blok. širina klijenta + "px"; klon. unutarnjiHTML = tekst; dokument. tijelo. appendChild (klon); var l = tekst. duljina - 1; za (; l> = 0 && clone. clientHeight> blok. clientHeight; - l) (klon. innerHTML = tekst. podniz (0, l) + "...";) blok. innerHTML = klon. innerHTML;

Ovo je u obliku jQuery dodatka:

(funkcija ($) (var truncate = funkcija (el) (var text = el. text (), visina = el. visina (), klon = el. klon (); klon. css ((pozicija: "apsolutna", vidljivost: "hidden", visina: "auto")); 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. ukloni ();); $. fn. truncateText = funkcija () ( vrati ovo svaki (funkcija () (skrati ($ (ovo));)););) (jQuery));

Pozdrav svima, moje ime je Anna Blok i danas ćemo govoriti o tome kako izrezati slike bez korištenja grafičkih programa.

Gdje ovo može dobro doći?

Prije svega, na stranicama na kojima sadržaj sa slikama najvjerojatnije neće biti izrezan ni u jedan blok.

Upečatljiv primjer: WordPress blog.

Recimo da želite da naslovnica vašeg članka bude 1:1 (kvadrat). Vaše radnje:

1. Preuzmite odgovarajuću sliku s Interneta;
2. Izrežite ga u Photoshopu do željenog omjera;
3. Objavite svoj članak.

Nakon što uđete na stranicu, vidjet ćete rezultat koji ste očekivali.

Ali, pretpostavimo da ste zaboravili izrezati sliku u Photoshopu i prenijeti nasumične slike kao naslovnicu s interneta, što će se onda dogoditi ?! Tako je, raspored će se pokvariti. A ako uopće niste koristili CSS, slika HD rezolucije može u potpunosti preklapati cijeli prikaz teksta. Stoga je važno biti u mogućnosti izrezati slike pomoću CSS stilova.

Pogledajmo različite situacije kako se to može implementirati ne samo sa CSS-om, već i sa SVG-om.

Primjer 1

Pokušajmo izrezati sliku koja je postavljena s pozadinskom slikom. Napravimo neke HTML oznake

Prelazimo na stiliziranje CSS-a. Pomoću pozadinske slike dodajte sliku, postavite granice za našu sliku, centrirajte sliku koristeći pozadinski položaj i postavite veličinu pozadine:

Jpg); pozadinski položaj: centar centar; veličina pozadine: naslovnica; širina: 300px; visina: 300px; )

Ovo je bila prva i najlakša metoda za obrezivanje slike. Pogledajmo sada drugi primjer.

Primjer 2

Pretpostavimo da imamo isti box kontejner unutar kojeg se nalazi oznaka img sa slikom koju ćemo sada stilizirati.

Također ćemo postaviti našu sliku u središte u odnosu na objekt koji ćemo stvoriti. I koristimo svojstvo koje se rijetko koristi: pristajanje objekta.

Okvir (položaj: relativan; preljev: skriven; širina: 300px; visina: 300px;) .box img (položaj: apsolutni; vrh: 50%; lijevo: 50%; transformacija: prevedi (-50%, - 50%); širina: 300px; visina: 300px; uklapanje objekta: naslovnica;)

Ovo je po mom mišljenju najbolja metoda. Savršeno je za bloganje ako za svoje postove koristite slike u vrlo različitim omjerima.

Više o HTML-u i CSS-u možete pročitati ovdje:

Primjer 3

Također možemo kreirati izrezivanje za slike u ovom trenutku ako ih umetnemo u SVG elemente. Uzmimo za primjer krug. Možemo stvoriti SVG pomoću oznaka. Napravite graničnu svg oznaku unutar koje će imati oznaku kruga i oznaku uzorka. U oznaku uzorka upišite oznaku slike. U njemu navodimo atribut xlink: href i dodajemo sliku. Također ćemo dodati atribute širine i visine. Ali to nije sve. Morat ćemo dodati vrijednost punjenja. Kako bismo naš posao učinili potpunim, oznaci slike ćemo dodati pomoćni atribut reserveAspectRatio, koji će ispuniti našu sliku "od i do" oko kruga.

Ovu metodu ne mogu nazvati univerzalnom. Ali može se koristiti u iznimnim slučajevima. Na primjer, ako smo se dotakli teme bloga, idealno bi bilo da se takva metoda uklopi u avatar autora koji piše članak.

Više o HTML-u i CSS-u možete pročitati ovdje:

Ishodi:
Pokrili smo 3 metode obrezivanja slike na web-mjestu: korištenje pozadinske slike pomoću oznake img i povezivanje sa svg uzorkom s ugrađivanjem bitmapa pomoću oznake 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 o njima nauče.

Ne zaboravite postaviti pitanja o kodiranju ili front-end razvoju profesionalcima na FrontendHelpu online.

U ovom članku ćemo vam reći o 3 brze i jednostavne CSS tehnike koju možete koristiti za prikaz samo dijela slike na svojoj stranici.

Sve metode koje se ovdje koriste zapravo trebaju samo nekoliko redaka CSS kodirati. Međutim, ovo nije obrezivanje u doslovnom smislu riječi ( CSS još ne mogu), samo skrivamo i prikazujemo samo onaj dio slike koji želimo vidjeti.

Ove tehnike mogu biti vrlo korisne ako želite sliku dovesti do određene veličine, odnosno želite stvoriti, primjerice, njezinu sličicu (smanjenu kopiju slike) u odjeljku vijesti ili nešto slično.

Tehnika 1 - Korištenje negativnih margina ( Negativne marže)

Ako ne želite koristiti negativne margine, predlažemo korištenje ove tehnike №2 ... Uključuje roditelj (paragraf) koji ima određenu širinu i visinu. Ovaj stavak ima svojstvo pozicioniranje naveden kao relativan. Širina i visina određuju dimenzije prikazanog polja. I slika smještena unutar paragrafa ima svojstvo pozicioniranje postavljeno na apsolutno. Tada možemo koristiti svojstva vrh (vrh) i lijevo rasporedite sliku kako želimo, pritom određujući koji dio slike prikazati, a koji - ne.

HTML identičan kodu iz prethodne tehnike:

Tehnika 3 - Korištenje svojstva rezanja ( Svojstvo isječka)

Ova tehnika bi trebala biti najlakša, jer svojstvo isječka definira dio elementa koji će se prikazati. Zvuči kao savršeno rješenje, ali postoji jedna zamka: ošišan element moraju biti postavljeni apsolutno. Da bismo mogli koristiti element, moramo dodati dodatni element, izračunati veličinu vidljivog područja slike, dodati ovu veličinu na roditelj, koristiti roditelj... Puno posla, zar ne to?

Joj, još jedan problem: veličina izrezanog elementa se ne smanjuje na veličinu izrezivanja, već ostaje izvorne veličine (slika izvan izrezivanja jednostavno je skrivena). Moramo koristiti apsolutno pozicioniranje da pomaknemo okvir za prikaz u gornji lijevi kut roditelja.

Međutim, ne može se ostaviti nespomenut svojstvo rezanja... I tako opet kod...