Kako ograničiti retke teksta samo pomoću CSS-a

Ograničenje količine teksta u elementu uobičajeni je zahtjev za web dizajn. Često ćete vidjeti članak s izvatkom od tri ili četiri retka s gumbom koji vam omogućuje proširivanje cijelog teksta.

Ovaj dizajn možete izraditi kombinacijom CSS-a i JavaScripta. Ali to možete učiniti i samo koristeći CSS. Otkrijte dva načina ograničavanja teksta u okviru i kako možete stvoriti dinamički gumb za proširenje koristeći samo CSS.

Webkit tehnika

Napravite praznu mapu i uredite dvije datoteke u njoj: index.html i stil.css. Unutar index.html datoteku, stvorite HTML kostur:

html>
<htmljezik="en">
<glava>
<titula>Dokumenttitula>
<vezarel="list stilova"href="style.css">
glava>
<tijelo>
tijelo>
html>

Veza u odjeljak, do stil.css datoteku, osigurava da će se svaki CSS koji dodate toj datoteci primijeniti na ovu stranicu. Zatim zalijepite sljedeće HTML oznake unutar oznake u index.html:

<odjeljakrazreda="skupina kartica">

instagram viewer


<članakrazreda="kartica">
<h2>Članak 1h2>
<strrazreda="izrezani tekst">
 Ovdje ide tekst od 300 riječi
str>
<ulaznitip="potvrdni okvir"razreda="proširi-btn">
članak>
<članakrazreda="kartica">
<h2>Članak 2h2>
<strrazreda="izrezani tekst">
 Ovdje ide tekst od 200 riječi
str>
<ulaznitip="potvrdni okvir"razreda="proširi-btn">
članak>
<članakrazreda="kartica">
<h2>Članak 1h2>
<strrazreda="izrezani tekst">
 Ovdje ide tekst od 100 riječi
str>
<ulaznitip="potvrdni okvir"razreda="proširi-btn">
članak>
odjeljak>

Struktura ovog HTML-a je jednostavna, ali još uvijek koristi semantičko označavanje za pristupačnost. Element odjeljka sadrži tri elementa članka. Svaki članak sadrži naslov, odlomak i ulazni element. Koristit ćete CSS za stiliziranje svakog odjeljka članka u karticu.

U međuvremenu će vaša stranica izgledati ovako:

Na gornjoj slici možete vidjeti različite duljine teksta u svakom odlomku. 300 riječi u prvom, 200 riječi u drugom i 100 u trećem.

Sljedeći korak je početak stiliziranja stranice dodavanjem CSS-a u stil.css datoteka. Počnite poništavanjem obruba na dokumentu i davanjem bijele pozadine tijelu:

*, *::prije, *::nakon {
dimenzioniranje kutije: rubni okvir;
}
tijelo {
pozadina: #f3f3f3;
prelijevanje: skriven;
}

Zatim pretvorite element s klasom grupe kartica u mrežni spremnik s tri stupca. Svaki dio članka zauzima stupac:

.kartica-grupa {
prikaz: rešetka;
rešetka-predložak-stupci: ponoviti(3, 1fr);
praznina: .5rem;
align-items: flex-start;
}

Stilizirajte svaki odjeljak članka kao karticu s bijelom bojom pozadine i crnim, blago okruglim rubom:

.kartica {
pozadina: bijela;
podstava: 1rem;
granica: 1pxčvrstacrno;
granični radijus: .25em;
}

Na kraju dodajte neke margine:

h2, str {
margina: 0;
}
h2 {
margina-dno: 1rem;
}

Spremite datoteku i provjerite svoj preglednik. Stranica bi trebala izgledati kao stranica prikazana na slici ispod:

Sljedeći korak je smanjiti broj redaka za svaki tekst na 3. Evo CSS-a za to:

.odsječak-tekst {
--max-redovi: 3; 
prelijevanje: skriven;

prikaz: -webkit-box; 
-webkit-box-orient: vertikalna;
-webkit-line-stezaljka: var(--max-redovi);
}

Započnite postavljanjem CSS varijabla, max-lines, do 3 i skrivanje prekomjernog sadržaja. Zatim postavite zaslon na -webkit-box i pričvrstite vod na 3.

Sljedeća slika prikazuje rezultat. Svaka kartica prikazuje elipsu u trećem retku teksta:

Ovu tehniku ​​može biti prilično teško izvesti. Ako biste izostavili bilo koje svojstvo, onda će sve puknuti. Drugi nedostatak je da ne možete koristiti svojstvo prikaza osim --webkit-box. Na primjer, možda želite koristite Grid ili Flexbox. Iz tih razloga bolja je sljedeća tehnika.

Fleksibilniji pristup ograničavanju broja redaka u tekstu

Ova tehnika vam omogućuje da učinite istu stvar kao i webkit pristup, s istim rezultatima. Ali velika je razlika u tome što imate mnogo fleksibilnosti jer sami postavljate visinu. Osim toga, možete koristiti bilo koje svojstvo prikaza ili bilo koju opciju stila koju želite.

Za početak zamijenite CSS blok za .odsječak-tekst s ovim:

.odsječak-tekst {
--max-redovi: 5;
--visina-linije: 1.4;
visina: kalk(var(--max-redovi) * 1em * var(--visina-linije));
linija-visina: var(--visina-linije);
položaj: relativna;
}

Postavljanje visine crte važno je jer je morate uzeti u obzir pri određivanju svoje visine. Da biste dobili visinu, pomnožite visinu retka s veličinom fonta i brojem redaka.

Mi dodajemo položaj: relativan jer nam je potrebno za dodavanje efekta blijeđenja. Dodajte sljedeći CSS da dovršite učinak:

.odsječak-tekst::prije {
sadržaj: "";
položaj: apsolutni;
visina: kalk(2em * var(--visina-linije));
širina: 100%;
dno: 0;
pokazivač-događaji: nikakav;
pozadina: linearno-gradijent(dodno, transparentan, bijela);
}

Gornji CSS zamagljuje zadnji redak teksta na svakoj kartici. Možete postići efekt blijeđenja pomoću pozadina svojstvo i gradijent. Morate postaviti pokazivač-događaji do nikakav kako bi se osiguralo da se element ne može odabrati.

Evo rezultata:

Ovom tehnikom postignut je isti rezultat kao i prethodnom (plus zamućenje na kraju). Ali dobivate veću fleksibilnost za korištenje drugih vrsta izgleda i dizajna.

Dodavanje gumba za dinamičko proširivanje i sažimanje

Dodavanje gumba za proširivanje/sažimanje čini kartice realističnijima i interaktivnijima. S ovim uzorkom proširujete sadržaj klikom na Proširiti nakon čega se tekst mijenja u Kolaps. Tako se tekst gumba mijenja između "Proširi" i "Sažmi" dok ga kliknete. Nadalje, ostatak sadržaja prikazuje se i skriva u svakom pojedinačnom stanju.

Već ste definirali ulazni element u vašem HTML-u. Ovaj element će služiti kao vaš gumb. Da biste stilizirali ovaj unos u gumb, uključite sljedeći CSS u svoju tablicu stilova:

.proširi-btn {
izgled: nikakav;
granica: 1pxčvrstacrno;
podstava: .5em;
granični radijus: .25em;
kursor: pokazivač;
margin-top: 1rem;
}

Kada zadržite pokazivač na gumbu, želite promijeniti boju pozadine:

.proširi-btn:lebdjeti {
boja pozadine: #ccc;
}

Sada CSS za promjenu teksta kada se provjerava unos:

.proširi-btn::prije {
sadržaj: "Proširiti"
}
.proširi-btn:provjereno::prije {
sadržaj: "Kolaps"
}

Sada kada kliknete gumb/unos, tekst ide iz Proširiti do Kolaps. No sam sadržaj se još neće širiti. Da bi to bilo kada kliknete gumb, dodajte sljedeći CSS:

.odsječak-tekst:ima(+.proširi-btn:provjereno) {
visina: auto;
}

Ovaj primjer koristi has() CSS selektor za ciljanje elementa. Ovim kodom želite reći da ako područje s odsječenim tekstom ima označeni gumb za proširenje, visina kartice treba biti auto (što ga proširuje).

Evo rezultata:

Ostali CSS savjeti i trikovi za naučiti

Ovaj članak demonstrira dvije različite metode za ograničavanje broja redaka u okviru pomoću CSS-a. Dodali smo čak i gumb za proširivanje/sažimanje sadržaja bez pisanja ijednog retka JavaScripta.

Ali postoji mnoštvo drugih savjeta i trikova u CSS-u. Ovi vam savjeti nude kreativan način za postizanje željenih izgleda bez štete na performanse, čitljivost ili pristupačnost.