Orezanie obrázka CSS. Ako skrátiť dlhý reťazec o počet znakov v riešení problému css a js. Riešenie pre jeden riadkový text

Pridanie elipsy na koniec textu je možné dosiahnuť niekoľkými spôsobmi, máme k dispozícii css a js.

Po prvé, poďme zistiť problém. Existuje blokové označenie

Teraz musíte dosiahnuť efekt orezania textu v každej položke zoznamu, okrem toho musíte pridať elipsu.

Orezanie css textu

K tomu vytvoríme štýl pre triedu sýkoriek.
.tit (
white-space: nowrap; / * Zrušiť zalamovanie textu * /
prepad: skrytý; / * Skrátiť obsah * /
výplň: 5px; / * Polia * /
text-overflow: elipsa; / * Elipsa * /
}

Zvláštnosťou tohto riešenia je, že ak sa text zmestí do veľkosti bloku, elipsa sa nepridá. Čo nie je vždy riešením problému.

Najčastejšie je potrebné orezať text na jeho dĺžku a až potom pridať bodky.
Sú aj úlohy, kedy je potrebné v každom prípade pridať body (bez ohľadu na to, aký je text dlhý, aspoň 3 písmená). A ak je text dlhší ako určitá veľkosť, musí sa odrezať. V tomto prípade musíte použiť skripty.

Text zrežeme o počet znakov a pridáme elipsu bez ohľadu na dĺžku

Čo robíme?

Skriptu presne povieme, ktoré prvky je potrebné spracovať.
Ak to chcete urobiť, v riadku var elem = document.getElementsByClassName ("tit"); uvádzame triedu prvku (musí byť rovnaká).

Potom je potrebné nastaviť veľkosť textu pred jeho orezaním. Toto sú naše krátke riadky, ku ktorým sa pridá elipsa. Je za to zodpovedná premenná var size = 75;

Teraz by mal skript prejsť všetky prvky s požadovanou triedou a pridať elipsu.
Skript skontroluje dĺžku každého riadku a skráti text, ak jeho dĺžka presiahne 75 znakov. Ak je dĺžka menšia, potom sa jednoducho pridá elipsa (riadok if (elem [i] .innerHTML.length> size)).

Ako skript funguje si môžete pozrieť na ukážkovej stránke. To je všetko, teraz viete, ako orezať dlhý text pomocou rôznych metód.

Vlad Merževič

Napriek tomu, že monitory s veľkými uhlopriečkami sú čoraz dostupnejšie a ich rozlíšenie neustále rastie, občas vyvstane v obmedzenom priestore úloha zmestiť veľa textu. Môže to byť potrebné napríklad pre mobilnú verziu stránky alebo pre rozhranie, kde je dôležitý počet riadkov. V takýchto prípadoch má zmysel dlhé riadky textu skracovať a ponechať len začiatok vety. Rozhranie teda dostaneme do kompaktnej podoby a znížime množstvo zobrazovaných informácií. Samotné orezávanie riadkov je možné vykonať na strane servera pomocou rovnakého PHP, ale cez CSS je to jednoduchšie, navyše vždy môžete zobraziť celý text, napríklad keď naň prejdete kurzorom myši. Ďalej zvážime metódy, ako strihať text pomyselnými nožnicami.

V skutočnosti to všetko spočíva v použití vlastnosti pretečenia so skrytou hodnotou. Rozdiely spočívajú len v odlišnom zobrazení nášho textu.

Použitie prepadu

Aby sa vlastnosť overflow zobrazila s textom v celej svojej kráse, musíte zrušiť zalamovanie textu pomocou medzier s hodnotou nowrap. Ak sa tak nestane, efekt, ktorý potrebujeme, nebude, do textu sa pridá delenie slov a zobrazí sa celý. Príklad 1 ukazuje, ako orezať dlhý text so špecifikovanou sadou vlastností štýlu.

Príklad 1.pretečenie pre text

HTML5 CSS3 IE Cr Op Sa Fx

Výsledok tohto príkladu je znázornený na obr. 1.

Ryža. 1. Typ textu po použití vlastnosti pretečenia

Ako vidíte na obrázku, vo všeobecnosti je tu len jedna nevýhoda - nie je zrejmé, že text má pokračovanie, takže na to musí byť používateľ upozornený. Zvyčajne sa to robí pomocou gradientu alebo elipsy.

Pridanie prechodu do textu

Aby bolo jasnejšie, že text vpravo nekončí, môžete ho prekryť prechodom od priehľadnej po farbu pozadia (obrázok 2). Tým sa vytvorí efekt postupného rozpúšťania textu.

Ryža. 2. Text s prechodom

Príklad 2 ukazuje, ako vytvoriť tento efekt. Štýl samotného prvku zostane prakticky rovnaký, samotný gradient bude pridaný pomocou :: za pseudoprvkom a CSS3. Aby sme to dosiahli, cez vlastnosť content vložíme prázdny pseudoelement a aplikujeme naň gradient s rôznymi predponami pre hlavné prehliadače (príklad 2). Šírka prechodu sa dá jednoducho meniť cez šírku, tiež si môžete upraviť mieru priehľadnosti nahradením hodnoty 0,2 vlastnou.

Príklad 2. Prechod nad textom

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Intra-diskrétne arpeggio transformuje poly-rad, toto je jednokroková vertikála v ultra-polyfónnej tkanine.

Táto metóda nefunguje v programe Internet Explorer do 8.0 vrátane, pretože nepodporuje prechody. Môžete sa však vzdať CSS3 a urobiť gradient staromódnym spôsobom pomocou obrázka PNG-24.

Táto metóda funguje len s plným pozadím a v prípade obrázka na pozadí bude prechod nad textom markantný.

Elipsa na konci textu

Môžete tiež použiť elipsu namiesto prechodu na konci orezaného textu. Navyše sa pridá automaticky pomocou vlastnosti text-overflow. Rozumejú jej všetky prehliadače vrátane starších verzií IE a jedinou nevýhodou tejto vlastnosti je jej stále nejasný stav. Zdá sa, že táto vlastnosť je zahrnutá v CSS3, ale kód s ňou neprešiel validáciou.

Príklad 3 ukazuje použitie vlastnosti text-overflow s hodnotou elipsa, ktorá pridáva tri bodky. Keď umiestnite kurzor myši na text, zobrazí sa celý a zvýrazní sa farbou pozadia.

Príklad 3. Použitie pretečenia textu

HTML5 CSS3 IE Cr Op Sa Fx

Výsledok tohto príkladu je znázornený na obr. 3.

Ryža. 3. Text s tromi bodkami

Veľkou výhodou týchto metód je skutočnosť, že prechod a elipsa sa nezobrazia, ak je text krátky a celý sa zmestí do zadanej oblasti. Takže text sa zobrazí ako zvyčajne, keď je celý viditeľný na obrazovke, a orezaný, keď sa šírka prvku zníži.

V tomto článku vám povieme o 3 rýchle a jednoduché techniky CSS ktoré môžete použiť na zobrazenie iba časti obrázka na vašej stránke.

Všetky tu použité metódy v skutočnosti potrebujú iba pár riadkov CSS kód. Toto však nie je obriezka v doslovnom zmysle slova ( CSS zatiaľ to nedokážeme), skryjeme a ukážeme len tú časť obrázku, ktorú chceme vidieť.

Tieto techniky môžu byť veľmi užitočné, ak chcete obrázok priblížiť do určitej veľkosti, to znamená, že chcete vytvoriť napríklad jeho miniatúru (zmenšenú kópiu obrázka) v sekcii novinky alebo niečo podobné.

Technika 1 – Použitie záporných okrajov ( Záporné okraje)

Ak nechcete používať záporné okraje, odporúčame použiť túto techniku №2 ... Zahŕňa rodiča (odsek), ktorý má špecifickú šírku a výšku. Tento odsek má vlastnosť polohovaniešpecifikované ako relatívne. Šírka a výška určujú rozmery zobrazeného poľa. A obrázok umiestnený vo vnútri odseku má vlastnosť polohovanie nastavená na absolútnu. Potom môžeme použiť vlastnosti hore (hore) a vľavo usporiadajte obrázok tak, ako chceme, v procese určovania, ktorá časť obrázka sa má zobraziť a ktorá nie.

Html identický s kódom z predchádzajúcej techniky:

Technika 3 – Použitie vlastnosti krájania ( Vlastnosť klipu)

Táto technika by mala byť najjednoduchšia, pretože vlastnosť klipu definuje časť prvku, ktorá sa má zobraziť. Znie to ako dokonalé riešenie, ale existuje jeden zádrhel: orezaný prvok musí byť umiestnená absolútne. Aby sme mohli použiť prvok, musíme pridať ďalší prvok, vypočítať veľkosť viditeľnej oblasti obrázka, pridať túto veľkosť k rodičovi, použiť rodič ... Veľa práce, nie to?

Ach, ešte jeden problém: veľkosť orezaného prvku sa nezmenší na veľkosť orezania, ale zostane v pôvodnej veľkosti (obrázok mimo orezania sa jednoducho skryje). Na presun výrezu do ľavého horného rohu rodiča musíme použiť absolútne umiestnenie.

Nemožno však ostať bez zmienky vlastnosť krájania... A tak znova kód...

V bloku s pevnou výškou a šírkou je potrebné zobraziť text ľubovoľnej dĺžky. V tomto prípade, ak sa text úplne nezmestí, mal by sa zobraziť kus textu, ktorý úplne zapadá do určeného bloku, po ktorom sa nastaví elipsa.

Táto úloha je celkom bežná, no zároveň nie je taká triviálna, ako sa zdá.

Možnosť pre jednoriadkový text v CSS

V tomto prípade môžete použiť vlastnosť text-overflow: elipsa. V tomto prípade musí mať kontajner vlastnosť pretečeniu rovný skryté alebo klip

Blok (šírka: 250 pixelov; medzera: nowrap; pretečenie: skryté; pretečenie textu: elipsa;)

Možnosť pre viacriadkový text CSS

Prvým spôsobom orezania viacriadkového textu pomocou vlastností CSS je použitie pseudoprvkov : predtým a : po... Po prvé, značky HTML

A teraz samotné vlastnosti

Pole (pretečenie: skryté; výška: 200 pixelov; šírka: 300 pixelov; výška riadka: 25 pixelov;) .box: pred (obsah: ""; plávajúca plocha: vľavo; šírka: 5 pixelov; výška: 200 pixelov;) .box> *: prvý -child (float: right; width: 100%; margin-left: -5px;) .box: after (content: "\ 02026"; box-sizing: content-box; float: right; position: relatívna; hore: -25 pixelov; vľavo: 100 %; šírka: 3 em; ľavý okraj: -3 em; padding-right: 5 pixelov; zarovnanie textu: vpravo; veľkosť pozadia: 100 % 100 %; pozadie: lineárny gradient (doprava, rgba (255, 255, 255, 0), biela 50 %, biela);)

Ďalším spôsobom je použitie vlastnosti column-width, pomocou ktorej nastavujeme šírku stĺpca pre viacriadkový text. Pri použití tejto metódy však na konci nedostanete elipsu. HTML:

Blok (pretečenie: skryté; výška: 200px; šírka: 300px;) .block__inner (-webkit-column-width: 150px; -moz-column-width: 150px; column-width: 150px; výška: 100%;)

Tretie riešenie pre viacriadkový text v CSS je pre prehliadače Webkit... V ňom budeme musieť použiť niekoľko špecifických vlastností s predponou - webkit... Hlavným je -webkit-line-clamp, ktorý vám umožňuje určiť počet riadkov, ktoré sa majú zobraziť v bloku. Riešenie je krásne, ale dosť obmedzené kvôli jeho práci v obmedzenej skupine prehliadačov

Blok (pretečenie: skryté; pretečenie textu: elipsa; zobrazenie: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertikálne;)

Variant JavaScript pre viacriadkový text

Tu sa používa dodatočný neviditeľný blok, do ktorého sa na začiatku umiestni náš text, po ktorom sa postupne odstraňuje jeden znak, kým výška tohto bloku nebude menšia alebo rovná výške požadovaného bloku. A na konci sa text presunie do pôvodného bloku.

var block = dokument. querySelector (.block), text = blok. innerHTML, clone = dokument. createElement ("div"); klonovať. štýl. poloha = "absolútna"; klonovať. štýl. viditeľnosť = "skryté"; klonovať. štýl. šírka = blok. clientWidth + "px"; klonovať. innerHTML = text; dokument. telo. appendChild (klon); var l = text. dĺžka - 1; for (; l> = 0 && clone. clientHeight> block. clientHeight; - l) (klon. innerHTML = text. subreťazec (0, l) + "...";) blok. innerHTML = klon. innerHTML;

Toto je vo forme doplnku jQuery:

(funkcia ($) (var truncate = funkcia (el) (var text = el. text (), výška = el. výška (), klon = el. klon (); klon. css ((pozícia: "absolútna", viditeľnosť: "skryté", výška: "auto")); el. po (klon); var l = text. dĺžka - 1; pre (; l> = 0 && klon. výška ()> výška; - l) ( klon. text (text. podreťazec (0, l) + "...");) el. text (klon. text ()); klon. odstrániť ();); $. fn. skrátenýText = funkcia () ( return this. every (function () (truncate ($ (this));)););) (jQuery));