Kako obrezati dolgo besedilo s CSS. Obrežite eno ali večvrstično besedilo po višini z dodatkom elips. Dodajanje preliva besedilu

Vlad Merževič

Kljub temu, da postajajo monitorji velikih diagonal vse bolj dostopni in njihova ločljivost nenehno raste, se včasih na omejenem prostoru pojavi naloga, da se namesti veliko besedila. To je na primer morda potrebno za mobilno različico spletnega mesta ali za vmesnik, kjer je pomembno število vrstic. V takih primerih je smiselno obrezati dolge vrstice besedila, tako da ostane le začetek stavka. Tako bomo vmesnik spravili v kompaktno obliko in zmanjšali količino prikazanih informacij. Dejansko obrezovanje vrstic je mogoče izvesti na strani strežnika z istim PHP-jem, vendar je prek CSS-ja to lažje, poleg tega lahko vedno prikažete celotno besedilo, na primer, ko se nad njim premaknete s kazalcem miške. Nato bomo razmislili o metodah, kako izrezati besedilo z namišljenimi škarjami.

Pravzaprav je vse odvisno od uporabe lastnosti overflow s skrito vrednostjo. Razlike so le v drugačnem prikazu našega besedila.

Uporaba prelivanja

Da se lastnost overflow prikaže z besedilom v vsej svoji slavi, morate preklicati prelivanje besedila z uporabo presledka z vrednostjo nowrap. Če tega ne storite, potem učinka, ki ga potrebujemo, ne bo, besedilu bo dodan vezaj in prikazano bo v celoti. Primer 1 prikazuje, kako obrezati dolgo besedilo z določenim naborom lastnosti sloga.

Primer 1.overflow za besedilo

HTML5 CSS3 IE Cr Op Sa Fx

Rezultat tega primera je prikazan na sl. 1.

riž. 1. Vrsta besedila po uporabi lastnosti prelivanja

Kot je razvidno iz slike, je na splošno le ena pomanjkljivost - ni očitno, da ima besedilo nadaljevanje, zato je treba uporabnika s tem seznaniti. To se običajno naredi z gradientom ali elipso.

Dodajanje preliva v besedilo

Da bi bilo bolj jasno, da se besedilo na desni ne konča, ga lahko prekrijete s prelivom od prozorne do barve ozadja (slika 2). To bo ustvarilo učinek postopnega raztapljanja besedila.

riž. 2. Gradientno besedilo

Primer 2 prikazuje, kako ustvariti ta učinek. Slog samega elementa bo praktično ostal enak, sam gradient bo dodan s pomočjo :: za psevdoelementom in CSS3. To naredimo tako, da skozi lastnost vsebine vstavimo prazen psevdoelement in nanj uporabimo gradient z različnimi predponami za glavne brskalnike (primer 2). Širina preliva lahko enostavno spreminjate skozi širino, prilagodite lahko tudi stopnjo prosojnosti tako, da vrednost 0,2 zamenjate s svojo.

Primer 2. Gradient nad besedilom

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Intradiskretni arpeggio preoblikuje poli-vrstico, to je enostopenjska navpičnica v ultra-polifoni tkanini.

Ta metoda ne deluje v Internet Explorerju do vključno 8.0, ker ne podpira prelivov. Lahko pa se opustite CSS3 in naredite preliv na staromoden način z uporabo slike PNG-24.

Ta metoda deluje samo s trdnim ozadjem, v primeru slike ozadja pa bo preliv nad besedilom presenetljiv.

Elipsa na koncu besedila

Namesto preliva na koncu izrezanega besedila lahko uporabite tudi tri točke. Poleg tega bo dodan samodejno z lastnostjo text-overflow. Razumejo jo vsi brskalniki, vključno s starejšimi različicami IE, edina pomanjkljivost te lastnosti pa je še vedno nejasno stanje. Zdi se, da je ta lastnost vključena v CSS3, vendar koda z njo ne prestane preverjanja.

Primer 3 prikazuje uporabo lastnosti text-overflow z vrednostjo elipsis, ki doda elipso. Ko premaknete kazalec miške nad besedilo, se prikaže v celoti in poudari z barvo ozadja.

Primer 3. Uporaba prelivanja besedila

HTML5 CSS3 IE Cr Op Sa Fx

Rezultat tega primera je prikazan na sl. 3.

riž. 3. Besedilo s trotočkami

Velik plus teh metod je dejstvo, da se gradient in elipsa ne prikažeta, če je besedilo kratko in se v celoti prilega določenemu območju. Tako bo besedilo prikazano kot običajno, ko bo v celoti vidno na zaslonu in obrezano, ko se širina elementa zmanjša.

V nekaterih primerih je vsebina bloka prikazana zunaj meja elementa in se z njim prekriva. Lastnost overflow se uporablja za nadzor vedenja blokovnih elementov, ki določa, kako naj bo prikazana vsebina, ki teče izven bloka.

Z lastnostjo clip lahko prirežete element na določene dimenzije.

1. Lastnost prelivanja

Vsebina blokovnih elementov lahko preplavi blok, če sta višina in/ali širina za blok izrecno nastavljeni. Brez navedbe višine se bo polje raztegnilo, da se prilagodi vsebini, razen če je polje postavljeno na položaj: absolutno; ali položaj: fiksni; ... Besedilo lahko prekriva blok po višini, slike - po višini in širini.

2. Lastnost overflow-x

Lastnost določa, kako bo v primeru prelivanja odrezan desni rob vsebine znotraj bloka.

sintaksa:

Div (overflow-x: hidden;)

3. Lastnost overflow-y

Lastnost določa, kako bo spodnji rob vsebine znotraj bloka odrezan, če se prelije.

sintaksa:

Div (prelivanje-y: skrito;)

4. Lastnost posnetka

Lastnost določa, kateri del elementa bo viden. Del elementa, ki ostane viden po izrezu, se imenuje območje izrezovanja. Izrezovanje se uporabi za element, ki je sprva v celoti viden. Lastnost velja za elemente, ki imajo lastnost položaja nastavljeno na absolutno ali fiksno.

Obstaja besedilo poljubne dolžine, ki mora biti prikazano znotraj bloka fiksne višine in širine. V tem primeru, če se besedilo ne prilega v celoti, naj se prikaže del besedila, ki se popolnoma prilega določenemu bloku, po katerem se nastavi elipsa.

Ta naloga je precej pogosta, a hkrati ni tako nepomembna, kot se zdi.

Možnost za enovrstično besedilo v CSS

V tem primeru lahko uporabite lastnost text-overflow: ellipsis. V tem primeru mora vsebnik imeti lastnost prelivanje enako skrito oz posnetek

Blok (širina: 250 slikovnih pik; presledek: Nowrap; prelivanje: skrito; prelivanje besedila: tri točke;)

Možnost za večvrstično besedilo CSS

Prvi način za obrezovanje večvrstičnega besedila z uporabo lastnosti CSS je uporaba psevdoelementov : prej in : po... Najprej označevanje HTML

In zdaj same nepremičnine

Polje (preliv: skrito; višina: 200 slikovnih pik; širina: 300 slikovnih pik; višina vrstice: 25 slikovnih pik;) .box: pred (vsebina: ""; plavajoče: levo; širina: 5 slikovnih pik; višina: 200 slikovnih pik;) .box> *: prvi -child (float: desno; širina: 100%; margin-left: -5px;) .box: after (vsebina: "\ 02026"; box-sizing: content-box; float: desno; položaj: relativno; zgoraj: -25px; levo: 100%; širina: 3em; rob-levo: -3em; padding-desno: 5px; poravnava besedila: desno; velikost ozadja: 100% 100%; ozadje: linearni gradient (na desno, rgba (255, 255, 255, 0), bela 50%, bela;)

Drug način je uporaba lastnosti column-width, s katero nastavimo širino stolpca za večvrstično besedilo. Vendar pri uporabi te metode na koncu ne boste dobili trotočkov. HTML:

Blok (preliv: skrit; višina: 200 slikovnih pik; širina: 300 slikovnih pik;) .block__inner (-webkit-column-width: 150px; -moz-column-width: 150px; širina stolpca: 150px; višina: 100%;)

Tretja rešitev za večvrstično besedilo v CSS je za brskalnike Spletni komplet... V njem bomo morali uporabiti več specifičnih lastnosti s predpono - spletni komplet... Glavni je -webkit-line-clamp, ki vam omogoča, da določite število vrstic za prikaz v bloku. Rešitev je lepa, a precej omejena zaradi dela v omejeni skupini brskalnikov

Blok (prelivanje: skrito; prelivanje besedila: tri točke; prikaz: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: navpično;)

Različica JavaScript za večvrstično besedilo

Tukaj je uporabljen dodaten neviden blok, v katerega je prvotno postavljeno naše besedilo, nato pa se po en znak odstrani, dokler višina tega bloka ni manjša ali enaka višini želenega bloka. In na koncu se besedilo premakne v izvirni blok.

var blok = dokument. querySelector (".block"), besedilo = blok. innerHTML, klon = dokument. createElement ("div"); klon. slogu. položaj = "absolutno"; klon. slogu. vidnost = "skrito"; klon. slogu. širina = blok. širina odjemalca + "px"; klon. notranji HTML = besedilo; dokument. telo. appendChild (klon); var l = besedilo. dolžina - 1; za (; l> = 0 && clone. clientHeight> blok. clientHeight; - l) (klon. innerHTML = besedilo. podniz (0, l) + "...";) blok. notranji HTML = klon. notranji HTML;

To je v obliki vtičnika jQuery:

(funkcija ($) (var truncate = funkcija (el) (var text = el. text (), višina = el. višina (), klon = el. klon (); klon. css ((položaj: "absolutno", vidnost: "skrito", višina: "samodejno")); el. po (klon); var l = besedilo. dolžina - 1; za (; l> = 0 && klon. višina ()> višina; - l) ( klon. besedilo (besedilo. podniz (0, l) + "...");) el. besedilo (klon. besedilo ()); klon. odstrani ();); $. fn. truncateText = funkcija () ( vrni to vsako (funkcija () (okrni ($ (to));)););) (jQuery));

Pozdravljeni vsi, moje ime je Anna Blok in danes bomo govorili o tem, kako obrezati slike brez uporabe grafičnih programov.

Kje lahko to pride prav?

Najprej na spletnih mestih, kjer vsebina s slikami najverjetneje ne bo prirezana v noben določen blok.

Osupljiv primer: blog WordPress.

Recimo, da želite, da je naslovnica vašega članka 1: 1 (kvadrat). Vaša dejanja:

1. Prenesite ustrezno sliko z interneta;
2. Obrežite ga v Photoshopu na želeni delež;
3. Objavite svoj članek.

Ko vstopite na spletno mesto, boste videli rezultat, ki ste ga pričakovali.

Ampak, recimo, da ste pozabili obrezati sliko v Photoshopu in naložiti naključno sliko kot naslovnico z interneta, kaj se bo potem zgodilo ?! Tako je, postavitev se bo zlomila. In če CSS sploh niste uporabljali, lahko slika HD-ločljivosti popolnoma prekriva celoten pogled besedila. Zato je pomembno, da lahko slike obrezujete s slogi CSS.

Poglejmo si različne situacije, kako je to mogoče izvesti ne samo s CSS, ampak tudi s SVG.

Primer 1

Poskusimo obrezati sliko, ki je postavljena s sliko ozadja. Ustvarimo nekaj oznak HTML

Prehajamo na oblikovanje CSS. Z uporabo slike ozadja dodajte sliko, nastavite meje za našo sliko, centrirajte sliko s pomočjo položaja ozadja in nastavite velikost ozadja:

Jpg); položaj ozadja: sredinsko središče; velikost ozadja: naslovnica; širina: 300px; višina: 300px; )

To je bil prvi in ​​najpreprostejši način za obrezovanje slike. Zdaj pa poglejmo drugi primer.

Primer 2

Recimo, da imamo isti vsebnik škatle, znotraj katerega je oznaka img s sliko, ki jo bomo zdaj oblikovali.

Našo sliko bomo postavili tudi na sredino glede na predmet, ki ga bomo ustvarili. In uporabljamo lastnost, ki se redko uporablja: prileganje objekta.

Škatla (položaj: relativna; prelivanje: skrito; širina: 300px; višina: 300px;) .box img (položaj: absolutni; vrh: 50%; levo: 50%; transformacija: prevedi (-50%, - 50%); širina: 300px; višina: 300px; prileganje predmeta: pokrov;)

To je po mojem mnenju najboljša metoda. Za bloganje je kot nalašč, če za svoje objave uporabljate slike v zelo različnih razmerjih.

Več o HTML in CSS si lahko preberete tukaj:

Primer 3

Za slike lahko trenutno ustvarimo tudi obrezovanje, če jih vstavimo v elemente SVG. Za primer vzemimo krog. SVG lahko ustvarimo z uporabo oznak. Ustvarite obrobno oznako svg, znotraj katere bosta oznaka kroga in oznaka vzorca. V oznako vzorca napišite oznako slike. V njem določimo atribut xlink: href in dodamo sliko. Dodali bomo tudi atribute širine in višine. Ampak to še ni vse. Dodati bomo morali vrednost polnila. Da bo naše delo končano, bomo oznaki slike dodali pomožni atribut konzerveAspectRatio, ki bo našo sliko zapolnil "od in do" po krogu.

Te metode ne morem imenovati univerzalne. Lahko pa se uporablja v izjemnih primerih. Na primer, če smo se dotaknili teme bloga, bi se v idealnem primeru takšna metoda lahko prilegala avatarju avtorja, ki piše članek.

Več o HTML in CSS si lahko preberete tukaj:

Rezultati:
Pokrili smo 3 načine obrezovanja slike na spletnih mestih: z uporabo slike ozadja z oznako img in povezavo z vzorcem svg z vdelavo bitnih slik z uporabo oznake slike. Če poznate druge metode za obrezovanje slike z uporabo SVG, jih delite v komentarjih. Koristno bo ne samo zame, ampak tudi za druge, če se o njih učijo.

Ne pozabite zastaviti vprašanja o kodiranju ali front-end razvoju strokovnjakom na FrontendHelp na spletu.

V tem članku vam bomo povedali o 3 hitre in enostavne CSS tehnike ki jih lahko uporabite za prikaz samo dela slike na vaši strani.

Vse metode, uporabljene tukaj, dejansko potrebujejo le nekaj vrstic CSS Koda. Vendar to ni obrezovanje v dobesednem pomenu besede ( CSS tega še ne zmoremo), samo skrijemo in pokažemo samo tisti del slike, ki ga želimo videti.

Te tehnike so lahko zelo uporabne, če želite sliko pripeljati do določene velikosti, torej želite ustvariti na primer njeno sličico (pomanjšano kopijo slike) v razdelku z novicami ali kaj podobnega.

Tehnika 1 – Uporaba negativnih robov ( Negativne marže)

Če ne želite uporabiti negativnih robov, predlagamo uporabo tehnike №2 ... Vključuje nadrejenega (odstavek), ki ima določeno širino in višino. Ta odstavek ima lastnost pozicioniranje določeno kot relativno. Širina in višina določata dimenzije prikazanega polja. In slika, postavljena znotraj odstavka, ima to lastnost pozicioniranje nastavljeno na absolutno. Nato lahko uporabimo lastnosti vrh (vrh) in levo razporedite sliko, kot želimo, pri tem pa določimo, kateri del slike naj prikažemo in kateri - ne.

Html identična kodi iz prejšnje tehnike:

Tehnika 3 - Uporaba lastnosti rezanja ( Lastnost posnetka)

Ta tehnika bi morala biti najlažja, saj lastnost posnetka določa del elementa, ki bo prikazan. Sliši se kot popolna rešitev, vendar obstaja ena stiska: odrezan element mora biti popolnoma postavljen. Da bi lahko uporabili element, moramo dodati dodaten element, izračunati velikost vidne površine slike, dodati to velikost nadrejenemu, uporabiti nadrejeno ... Veliko dela, ne to?

O, še ena težava: velikost odrezanega elementa se ne zmanjša na velikost izreza, ampak ostane prvotna velikost (slika zunaj izrezka je preprosto skrita). Uporabiti moramo absolutno pozicioniranje, da premaknemo vidno polje v zgornji levi kot nadrejenega.

Vendar pa človek ne more ostati neomenjen lastnost rezanja... In tako spet koda ...