Beskär text med en eller flera rader på höjden med tillägg av ellips. Hur man trimmar en lång sträng efter antal tecken css och js problemlösning Lösning för flerradstext

Att lägga till en ellips i slutet av texten kan uppnås på flera sätt, till vårt förfogande css och js.

Låt oss först ta en titt på problemet. Det finns en blocklayout

Nu måste vi uppnå effekten av att skära av texten i varje element i listan, utöver detta måste vi lägga till en ellips.

klippa css-text

För att göra detta, skapa en stil för tit-klassen
.tit (
white-space: nowrap; /* Avbryt textbrytning */
overflow: gömd; /* Trimma innehåll */
stoppning: 5px /* Fält */
text-overflow: ellips; /* Ellipsis */
}

Det speciella med denna lösning är att om texten passar i blockstorleken kommer ellipsen inte att läggas till. Vilket inte alltid är lösningen på problemet.

Oftast behöver du klippa texten till dess längd och först efter det lägga till punkter.
Det finns även uppgifter när det ändå är nödvändigt att lägga till prickar (oavsett hur lång texten är, minst 3 bokstäver). Och om texten är längre än en viss storlek måste den beskäras. I det här fallet är det nödvändigt att använda skript.

Trimma text efter antal tecken och lägg till ellips oavsett längd

Vad gör vi?

Vi berättar för manuset vilka element som ska bearbetas.
För att göra detta, på raden var elem = document.getElementsByClassName("tit"); ange klassen för elementet (det måste vara samma).

Sedan måste du ställa in storleken på texten innan den beskärs. Det här är våra korta strängar som en ellips kommer att läggas till. Variabeln var size = 75 är ansvarig för detta;

Nu ska skriptet gå igenom alla element med önskad klass och lägga ner ellipsen.
Skriptet kontrollerar längden på varje rad och trunkerar texten om den är längre än 75 tecken. Om längden är mindre läggs helt enkelt en ellips till (raden if(elem[i].innerHTML.length > storlek)).

Du kan se hur skriptet fungerar på demosidan. Det är allt, nu vet du hur man skär lång text med olika metoder.

Vi vill alltid att allt på sajten ska vara snyggt, men till exempel har du block med text som ska skrivas in inom vissa gränser, det kan vara ett tillkännagivande för en artikel eller en beskrivning av en produkt. Samtidigt vår text godtycklig längd. Naturligtvis kan du hela tiden anpassa texten efter fältets storlek så att inget går, men du kan göra så att den extra texten döljs.

Det finns en enkel CSS-lösning för detta. Fastighetsanvändning text-overflow: ellips , vilket gör att du kan trimma ett snöre med ett långt test. Till detta beslut fungerade måste du ange bredden på det överordnade blocket och ha egenskapen svämma över likvärdig dold eller klämma .

Lösning för text med en rad:

Box-text ( text-overflow: ellips; //bild av långa rutor med textspill: dold; //dölj överfull textbredd: 100%; //bredd på rutan med text blanksteg: nowrap; //förbjud radbrytning text)

All deras utrustning och verktyg var vid liv, i en eller annan form.

Lösning för flerradstext:

Men för att beskära flerradstext i CSS måste du tillgripa pseudoelement :innan och :efter .

Box-text ( overflow: hidden; height: 200px; line-height: 25px; ) .box-text:before ( innehåll: ""; float: vänster; bredd: 5px; höjd: 200px; ) .box-text > * :first-child (float: höger; bredd: 100%; margin-left: -5px; ) .box-text:after ( innehåll: "\02026"; box-sizing: content-box; float: höger; position: relativ; top: -25px; vänster: 100%; bredd: 3em; margin-left: -3em; padding-right: 5px; text-align: höger; bakgrundsstorlek: 100% 100%; bakgrund: linear-gradient( till höger, rgba(255, 255, 255, 0), vit 50 %, vit); )

Den vänstra sidan av skogen var mörk, i skugga; den högra, blöt, glänsande, sken i solen, svagt vajande i vinden. Allt stod i blom; näktergalarna kvittrade och rullade nu nära, nu långt borta.

Problem

Att skära hörn är inte bara snabb väg uppnå ett mål, men också ett populärt stylingalternativ inom både tryck och webbdesign. Oftast handlar det om att skära ett eller flera hörn av behållaren i en vinkel på 45 °. Nyligen, på grund av det faktum att skeuomorfism började tappa mark platt design, denna effekt är särskilt populär. När hörnen är skurna på endast en sida, och varje hörn tar upp 50 % av elementets höjd, skapar detta en pilformad form, som också ofta används vid design av knappar och brödsmula-navigeringselement.

Det finns dock fortfarande inte tillräckligt med verktyg i CSS för att skapa denna effekt med enkla och okomplicerade one-liner-lösningar. På grund av detta tenderar många utvecklare att använda bakgrundsbilder, antingen genom att täcka de avskurna hörnen med trianglar (på en enfärgad bakgrund), eller genom att skapa hela bakgrunden med en eller flera bilder där hörnen redan är skurna. Uppenbarligen är sådana metoder helt oflexibla, svåra att underhålla och ökar latensen på grund av ytterligare HTTP-förfrågningar och webbplatsens totala filstorlek.

Ett exempel på en webbplats där det skurna hörnet (nedre till vänster i det halvtransparenta Hitta & Boka-fältet) passar perfekt in i designen

Lösning

Ett Möjlig lösning erbjuda oss de allsmäktiga CSS-gradienterna. Låt oss säga att vi bara vill ha ett avskuret hörn, säg det nedre högra hörnet. Tricket är att dra fördel av gradienternas förmåga att ta riktningen av vinkeln (t.ex. 45 grader) och positionerna för färgövergångsgränserna i absoluta värden, som inte ändras när de övergripande dimensionerna för elementet som bakgrunden tillhör är ändrats. Det följer av ovanstående att en linjär gradient kommer att räcka för oss.

Vi lägger till en genomskinlig färgtonskant för att skapa det skurna hörnet, och en annan färgtoningskant i samma position men med färgen som matchar bakgrunden. CSS-koden skulle vara följande (för ett 15px-hörn):

bakgrund: #58a;
background:linear-gradient(-45deg, transparent 15px, #58a 0);

Enkelt, eller hur? Resultatet ser du i figuren.

Tekniskt sett behöver vi inte ens det första tillkännagivandet. Vi har bara lagt till det som en lösning: om CSS-gradienter inte stöds kommer den andra deklarationen att ignoreras, så vi får åtminstone en enfärgad bakgrund. Anta nu att vi vill ha två avskurna hörn, säg båda de nedersta. Detta kan inte göras med en gradient, så vi behöver två. Din första tanke kan vara ungefär så här:

bakgrund: #58a;
bakgrund: linear-gradient(-45deg, transparent 15px, #58a 0), linear-gradient(45deg, transparent 15px, #655 0);

Detta fungerar dock inte. Som standard tar båda gradienterna upp hela området av elementet, så de skymmer varandra. Vi måste göra dem mindre genom att begränsa var och en till hälften av elementet med bakgrundsstorlek:
bakgrund: #58a;

bakgrundsstorlek: 50 % 100 %

Du kan se resultatet på bilden.

Även om vi tillämpade en bakgrundsstorlek överlappar övertoningarna fortfarande varandra. Anledningen är att vi glömde att stänga av bakgrundsupprepning, så var och en av bakgrunderna upprepas två gånger. Följaktligen skymmer den ena bakgrunden fortfarande den andra, men denna gång på grund av upprepning. En ny version koden ser ut så här:
bakgrund: #58a;
bakgrund: linear-gradient(-45deg, transparent 15px, #58a 0) höger, linear-gradient(45deg, transparent 15px, #655 0) vänster;
bakgrundsstorlek: 50 % 100 %

Ni kan se resultatet på bilden och se till att det är det – äntligen! - Arbetar! Du har förmodligen redan gissat hur man applicerar denna effekt på alla fyra hörnen. Du behöver fyra gradienter och kod som följande:

bakgrund: #58a;
bakgrund: linjär-gradient(135 grader, transparent 15px, #58a 0) uppe till vänster,

linear-gradient(-135deg, transparent 15px, #655 0) uppe till höger,

linear-gradient(-45deg, transparent 15px, #58a 0) längst ner till höger,

linear-gradient(45deg, transparent 15px, #655 0) längst ner till vänster;
bakgrundsstorlek: 50% 50%;
bakgrundsupprepning: ingen upprepning;

RÅD
Vi använde olika färger (#58a och #655) för att göra felsökningen enklare. I praktiken kommer båda gradienterna att ha samma färg.
Men problemet med den tidigare koden är att den är svår att underhålla. Det krävs fem redigeringar för att ändra bakgrundsfärgen och fyra för att ändra vinkelvärdet. En mixin skapad med en förprocessor kan minska antalet repetitioner. Så här skulle den här koden se ut i SCSS:
SCSS
@mixin avfasade hörn($bg,
$tl:0, $tr:$tl, $br:$tl, $bl:$tr) (
bakgrund: $bg;
bakgrund:
linear-gradient(135deg, transparent $tl, $bg 0)
övre vänstra,
linear-gradient(225deg, transparent $tr, $bg 0)
överst till höger,
linear-gradient(-45deg, transparent $br, $bg 0)
nere till höger,
linear-gradient(45deg, transparent $bl, $bg 0)
nedre vänstra;
bakgrundsstorlek: 50% 50%;
bakgrundsupprepning: ingen upprepning;
}

Sedan kan den vid behov anropas, som visas nedan, med 2–5 argument:
SCSS
@inkludera avfasade hörn(#58a, 15px, 5px);
I det här exemplet kommer vi att sluta med ett element som har sina övre vänstra och nedre högra hörn klippta med 15px och dess övre högra och nedre vänstra hörn med 5px, liknande hur kantradie fungerar när vi anger mindre än fyra värden. Detta är möjligt eftersom vi också tar hand om standardvärden för argument i vår SCSS-mixin - och ja, dessa standardvärden kan också referera till andra argument.
PRÖVA DIG!
http://play.csssecrets.io/bevel-corners-gradients

Böjda skurna hörn

Ett utmärkt exempel på att använda böjda skurna hörn på en webbplats http://g2geogeske.com designern har gjort dem till ett centralt designelement: de finns i navigeringen, i innehållet och till och med i sidfoten.
En variant av gradientmetoden låter dig skapa böjda skurna hörn, en effekt som många människor kallar "inre gränsradie" eftersom det ser ut som en inverterad version av rundade hörn. Den enda skillnaden är användningen av radiella gradienter istället för linjära:
bakgrund: #58a;
bakgrund: radial-gradient (cirkel längst upp till vänster, transparent 15px, #58a 0) överst till vänster,

radial-gradient(cirkel uppe till höger, transparent 15px, #58a 0) uppe till höger,

radial-gradient(cirkel längst ner till höger, transparent 15px, #58a 0) längst ner till höger,

radial-gradient(cirkel längst ner till vänster, transparent 15px, #58a 0) längst ner till vänster;
bakgrundsstorlek: 50% 50%;
bakgrundsupprepning: ingen upprepning;

Som med den tidigare tekniken kan storleken på hörnet styras av positionerna för färgövergångsgränserna, och blandning kan också göra denna kod mer underhållbar.

PRÖVA DIG!
http://play.csssecrets.io/scoop-corners

Lösning med inline SVG och border-image

Även om den gradientbaserade lösningen fungerar, har den några nackdelar:
koden är mycket lång och full av upprepningar. I det vanligaste fallet, när vi behöver skära alla fyra hörnen lika mycket, innebär en ändring av denna mängd fyra redigeringar i koden.

Likaså krävs fyra redigeringar för att ändra bakgrundsfärgen och ges backup lösning, sedan alla fem; Att animera en förändring i storleken på ett avskuret hörn är otroligt svårt, och till och med omöjligt i vissa webbläsare. Lyckligtvis, beroende på det önskade resultatet, kan vi använda ett par metoder till. En av dem involverar facket gränsbild med en sträng SVG-kod, i vilken hörnen genereras.

Att veta hur det fungerar gränsbild(om du behöver fräscha upp denna kunskap i ditt minne, kommer du att hitta en ledtråd) kan du redan föreställa dig hur SVG-koden?

Eftersom de övergripande måtten inte är viktiga för oss (border-image kommer att ta hand om skalningen, och SVG-ritningar skalas perfekt oavsett dimensioner - varsågod Vektorgrafik!), kan alla storlekar likställas med en för att fungera med mer bekväma och korta värden. Skärvinkelvärdet kommer att vara lika med ett, och de raka sidorna kommer också att vara lika med ett. Resultat (förstorat för läsbarhet). Koden som krävs för detta visas nedan:
kant: 15px solid transparent;


width="3" height="3" fill="%2358a">\
\
’);

Observera att skärningsstegets storlek är 1 . Det betyder inte 1 pixel; den faktiska storleken bestäms av SVG-filens koordinatsystem (det är därför vi inte har enheter). Om vi ​​använde procentsatser skulle vi behöva approximera 1/3 av bilden med ett bråktal, som 33,34 %. Det är alltid riskabelt att ta till ungefärliga värden, eftersom i olika webbläsare värden kan avrundas till olika grader av noggrannhet. Och genom att hålla oss till SVG-filens koordinatsystemenheter sparar vi oss själva huvudvärken som kommer med all den avrundningen.

Som du kan se är de avskurna hörnen närvarande, men bakgrunden är det inte. Detta problem kan lösas på två sätt: antingen definiera bakgrunden eller lägga till nyckelord fyll till gränsbildsdeklarationen så att det mittersta skivningselementet inte kasseras. I vårt exempel skulle vi hellre definiera en separat bakgrund, eftersom denna definition också kommer att fungera som en lösning för webbläsare som inte stöder den här lösningen.

Dessutom har du säkert märkt att de avskurna hörnen nu är mindre än med den tidigare tekniken, och det kan vara förvirrande. Vi ställer trots allt in kantens bredd till 15px! Anledningen är att i gradientlösningen mättes dessa 15 pixlar längs gradientlinjen, som är vinkelrät mot gradientens riktning. Rambredden mäts dock inte diagonalt, utan horisontellt/vertikalt.

Känn vad jag leder till? Ja, ja, återigen den allestädes närvarande Pythagoras sats, som vi aktivt använde. Diagrammet i figuren bör förtydliga situationen.

Kort sagt, för att uppnå samma visuella resultat behöver vi en kantbredd som är 2 gånger den storlek som vi skulle använda i gradientmetoden. I det här fallet kommer det att vara en pixel, vilket är mest rimligt att approximera till 20px , såvida vi inte står inför uppgiften att föra den diagonala storleken så nära de eftertraktade 15px som möjligt:

border-image: 1 url('data:image/svg+xml,\

width="3" height="3" fill="%2358a">\

0,2 tum/>\
’);
bakgrund: #58a;
Men som ni ser är resultatet inte riktigt vad vi förväntade oss.

Vart tog våra mödosamt avskurna hörn vägen? Var inte rädd, unge padawan, hörnen finns kvar. Du kommer genast att förstå vad som hände om du ställer in en annan bakgrundsfärg, till exempel #655.
Som bilden nedan visar ligger anledningen till att våra hörn har försvunnit i bakgrunden: bakgrunden som vi definierade ovan skymmer dem helt enkelt. Allt vi behöver göra för att åtgärda detta besvär är att använda bakgrundsklipp för att förhindra att bakgrunden kryper under ramområdet:
kant: 20px solid transparent;
border-image: 1 url('data:image/svg+xml,\

width="3" height="3" fill="%2358a">\

0,2 tum/>\
’);
bakgrund: #58a;

Nu är problemet löst och vårt område ser exakt likadant ut som tidigare. Dessutom kan vi den här gången enkelt ändra storlek på hörnen med bara en redigering: justera bara kantens bredd. Vi kan till och med animera den här effekten eftersom kantbredd stöder animering!

Och att ändra bakgrunden nu kräver två redigeringar istället för fem. Dessutom, eftersom vår bakgrund är oberoende av hörneffekten, kan vi definiera en gradient eller något annat mönster för den, så länge som kanterna fortfarande är #58a .

Vi använder till exempel radiell gradient från färg hsla(0,0%,100%,.2) till transparent. Det finns bara ett litet problem kvar att lösa. Om kantbild inte stöds är reservlösningen inte begränsad till frånvaron av avskurna hörn. Eftersom bakgrunden är klippt kommer utrymmet mellan kanten på fältet och dess innehåll att minska. För att fixa detta måste vi ställa in ramen till samma färg som vi använder för bakgrunden:
kant: 20px fast #58a;
border-image: 1 url('data:image/svg+xml,\

width="3" height="3" fill="%2358a">\
\
’);
bakgrund: #58a;
bakgrundsklipp: padding-box;

I webbläsare där vår definition gränsbild stöds kommer denna färg att ignoreras, men där kantbild inte fungerar kommer den extra kantfärgen att ge en mer elegant reservlösning. Dess enda nackdel är ökningen av antalet redigeringar som krävs för att ändra bakgrundsfärgen till tre.
PRÖVA DIG!
http://play.csssecrets.io/bevel-corners

Urklippsbana lösning

Även om gränsbildslösningen är mycket kompakt och följer DRY-principerna väl, medför den vissa begränsningar. Till exempel bör vår bakgrund fortfarande vara antingen helt eller åtminstone fylld med en enfärgad färg längs kanterna.

Men vad händer om vi vill använda en annan typ av bakgrund, till exempel en struktur, ett mönster eller en linjär gradient? Det finns en annan metod som inte har sådana begränsningar, även om det naturligtvis finns vissa begränsningar för dess användning.

Kom ihåg Fastighet klippbana från hemligheten "Hur man gör en romb"? CSS-urklippsbanor har en fantastisk egenskap: de låter dig blanda procentuella värden(med vilken vi anger elementets övergripande dimensioner) med absoluta, vilket ger otrolig flexibilitet. Till exempel ser koden för en urklippsbana som klipper ett element till formen av en 20px fasad rektangel (mätt horisontellt) ut så här:
bakgrund: #58a;
klippbana: polygon(
20px 0, calc(100% - 20px) 0, 100% 20px,
100 % calc(100 % - 20px), calc(100 % - 20px) 100 %,
20px 100%, 0 calc(100% -20px), 0 20px);
Även om det är kortfattat följer det här kodavsnittet inte DRY-principerna, och detta blir ett av de största problemen om du inte använder en förprocessor. Faktum är att denna kod är den bästa illustrationen av WET-principen av alla lösningar på ren CSS presenteras i den här boken, för för att ändra storleken på hörnet här måste du göra så många som åtta (!) redigeringar.

Å andra sidan kan bakgrunden ändras med bara en redigering, så det har vi åtminstone. En av fördelarna med detta tillvägagångssätt är att vi kan använda absolut vilken bakgrund som helst, eller till och med beskärningsersättningselement som bilder. Figuren visar en bild stiliserad med skurna hörn. Ingen av de tidigare metoderna kan uppnå en sådan effekt. Dessutom stöder clip-path-egenskapen animering, och vi kan animera inte bara förändringen av storleken på hörnet, utan även övergången mellan olika former.

Allt som krävs är att använda en annan urklippsbana. Förutom att vara mångsidig och ha begränsat webbläsarstöd är nackdelen med den här lösningen att om vi inte tar hand om utfyllnad som är tillräckligt bred kommer texten också att klippas, för när man klipper ett element tas inte dess beståndsdelar hänsyn på något sätt. Däremot tillåter gradientmetoden att texten helt enkelt sträcker sig bortom de skurna hörnen (eftersom de bara är en del av bakgrunden), medan gränsbildsmetoden fungerar på samma sätt som vanliga kanter och lindar texten på en ny rad.

PRÖVA DIG!
http://play.csssecrets.io/bevel-corners-clipped

FRAMTIDA SNITT HÖRN
I framtiden kommer vi inte att behöva tillgripa CSS-gradienter, klippning eller SVG för att uppnå effekten av klippta hörn. Ny fastighet hörnform, ingår i CSS-bakgrunder och gränser Nivå 4 , kommer att rädda oss den där huvudvärken. Den kommer att användas för att skapa effekten av avskurna hörn i olika former, i kombination med egenskapen border-radius, som behövs för att bestämma mängden beskärning. Till exempel, för att beskriva 15px skurna hörn på alla sidor av en bild, skulle denna enkla kod räcka:

kantradie: 15px;
hörnform: avfasning;

Läs också

Hej alla, jag heter Anna Blok och idag ska vi prata om hur man kan beskära bilder utan att använda grafikprogram.

Var kan det vara användbart?

Först och främst på webbplatser där innehåll med bilder, troligen, inte kommer att beskäras för att passa något särskilt block.

Ett slående exempel: blogg på WordPress.

Låt oss säga att du vill att omslaget till din artikel ska ha ett bildförhållande på 1:1 (kvadrat). Dina handlingar:

1. Ladda ner en passande bild från Internet;
2. Beskär det i Photoshop till önskade proportioner;
3. Publicera en artikel.

När du besöker sidan kommer du att se det resultat du förväntade dig.

Men antar att du glömde beskära bilden i Photoshop och laddade upp en slumpmässig bild som omslag från Internet, vad händer då?! Det stämmer, layouten kommer att gå sönder. Och om du inte använde CSS alls, kan en HD-upplösningsbild helt blockera hela texten. Därför är det viktigt att kunna beskära bilder med hjälp av CSS-stilar.

Låt oss titta på olika situationer för hur detta kan implementeras inte bara med CSS, utan också med SVG.

Exempel 1

Låt oss försöka beskära en bild som är placerad med hjälp av bakgrundsbild. Låt oss skapa lite HTML-uppmärkning

Låt oss gå vidare till CSS-styling. Vi lägger till en bild via bakgrundsbild , anger ramarna för vår bild, centrerar bilden med bakgrundsposition och ställer in bakgrundsstorleken:

jpg); bakgrundsposition: center-center; bakgrundsstorlek:omslag; bredd:300px; höjd:300px; )

Detta var den första och enklaste metoden för att beskära en bild. Låt oss nu titta på det andra exemplet.

Exempel 2

Anta att vi har samma boxcontainer inuti som är en img-tagg med en bild som vi nu ska styla.

Vi kommer också att placera vår bild i centrum i förhållande till objektet som vi ska skapa. Och vi använder en egenskap som används ganska sällan: object-fit .

Box (position: relativ; overflow:hidden; width:300px; height:300px; ) .box img (position: absolut; top:50%; left:50%; transform:translate(-50%,-50%); width:300px; height:300px; object-fit:cover;)

Enligt min mening är detta den bästa metoden. Den är idealisk för bloggar om du använder bilder för inlägg av helt andra proportioner.

Läs mer om HTML och CSS här:

Exempel 3

Vi kan också skapa urklipp för bilder för tillfället om vi infogar dem i SVG-element. Låt oss ta en cirkel som exempel. Vi kan skapa SVG med taggar. Skapa en omslagssvg-tagg inuti som kommer att vara en cirkeltagg och en mönstertagg. I mönstertaggen skriver vi bildtaggen. I den anger vi attributet xlink:href och lägger till en bild. Vi kommer också att lägga till bredd- och höjdattributen. Men det är inte allt. Vi kommer att behöva lägga till ett fyllningsvärde. För att göra vårt arbete komplett kommer vi att lägga till ett extra preserveAspectRatio-attribut till bildtaggen, vilket gör att vi kan fylla vår bild "från och till" runt cirkeln.

Jag kan inte kalla den här metoden generisk. Men det kan användas i undantagsfall. Till exempel, om vi berörde ämnet för en blogg, skulle en sådan metod idealiskt kunna passa in i avataren för författaren som skriver artikeln.

Läs mer om HTML och CSS här:

Resultat:
Vi har täckt 3 metoder för att beskära bilder på webbplatser: att använda bakgrundsbild , använda img-taggen och mönsterrelaterad svg med inbäddning av bitmappar med bildtaggen. Om du känner till andra metoder för att beskära en bild med SVG, dela dem sedan i kommentarerna. Inte bara för mig, utan också för andra, kommer det att vara användbart att lära sig om dem.

Glöm inte att ställa dina frågor om layout eller frontend-utveckling till proffs på FrontendHelp online.