Familiarizați-vă cu o tehnică CSS la îndemână pe care o puteți folosi pentru a ascunde conținutul și a-l dezvălui la cerere.
Limitarea cantității de text dintr-un element este o cerință comună de design web. Veți vedea adesea un articol cu un fragment de trei sau patru rânduri cu un buton care vă permite să extindeți textul complet.
Puteți crea acest design folosind o combinație de CSS și JavaScript. Dar puteți face acest lucru și folosind CSS singur. Descoperiți două moduri de a limita textul într-o casetă și cum puteți crea un buton de extindere dinamic folosind doar CSS.
Tehnica Webkit
Creați un folder gol și editați două fișiere în interiorul acestuia: index.html și stil.css. În interiorul index.html fișier, creați un schelet HTML:
html>
<htmllang="ro"><cap>
<titlu>Documenttitlu>
<legăturărel="foaia de stil"href=„style.css”>
cap><corp>
corp>
html>
Un link în secțiunea, la stil.css fișier, se asigură că orice CSS pe care îl adăugați la acel fișier se va aplica acestei pagini. Apoi, lipiți următorul marcaj HTML în etichete în index.html:
<secțiuneclasă="grup de carduri">
<articolclasă="card">
<h2>articolul 1h2><pclasă=„text tăiat”>
Textul de 300 de cuvinte este aici
p><intraretip="Caseta de bifat"clasă="expand-btn">
articol><articolclasă="card">
<h2>Articolul 2h2><pclasă=„text tăiat”>
Textul de 200 de cuvinte este aici
p><intraretip="Caseta de bifat"clasă="expand-btn">
articol><articolclasă="card">
<h2>articolul 1h2><pclasă=„text tăiat”>
Textul de 100 de cuvinte este aici
p>
<intraretip="Caseta de bifat"clasă="expand-btn">
articol>
secțiune>
Structura acestui HTML este simplă, dar încă folosește marcaj semantic pentru accesibilitate. Un element de secțiune conține trei elemente de articol. Fiecare articol cuprinde un titlu, un paragraf și un element de intrare. Veți folosi CSS pentru a modela fiecare secțiune de articol într-un card.
Între timp, pagina ta va arăta astfel:
Din imaginea de mai sus, puteți vedea diferite lungimi de text în fiecare paragraf. 300 de cuvinte în primul, 200 de cuvinte în al doilea și 100 în al treilea.
Următorul pas este să începeți să stilați pagina adăugând CSS la stil.css fişier. Începeți prin a reseta chenarul documentului și a da corpului o culoare de fundal alb:
*, *::inainte de, *::după {
dimensionarea cutiei: cutie-chenar;
}
corp {
fundal: #f3f3f3;
revărsare: ascuns;
}
Apoi, transformați elementul cu clasa card-group într-un container grilă cu trei coloane. Fiecare secțiune de articol ocupă o coloană:
.card-grup {
afişa: grilă;
grilă-șablon-coloane: repeta(3, 1fr);
decalaj: .5rem;
alinierea elementelor: flex-start;
}Stilați fiecare secțiune de articol ca un card cu culoarea de fundal albă și un chenar negru, ușor rotund:
.card {
fundal: alb;
căptușeală: 1rem;
frontieră: 1pxsolidnegru;
hotar-raza: .25em;
}În cele din urmă, adăugați câteva marje:
h2, p {
marginea: 0;
}
h2 {
margine-fond: 1rem;
}
Salvați fișierul și verificați browserul. Pagina ar trebui să arate așa cum se arată în imaginea de mai jos:
Următorul pas este să reduceți numărul de linii pentru fiecare text la 3. Iată CSS-ul pentru asta:
.text tăiat {
--max-linii: 3;
revărsare: ascuns;
afişa: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: var(--max-linii);
}
Începe prin a seta o variabilă CSS, max-line, la 3 și ascunderea conținutului debordant. Apoi setați afișajul la -webkit-box și fixați linia la 3.
Următoarea imagine arată rezultatul. Fiecare card afișează o elipsă pe a treia linie de text:
Această tehnică poate fi destul de dificil de realizat. Dacă ar fi să omiteți orice proprietate, atunci totul se va rupe. Un alt dezavantaj este că nu puteți utiliza o proprietate de afișare în afară de --webkit-box. De exemplu, s-ar putea să vrei utilizați Grid sau Flexbox. Din aceste motive, următoarea tehnică este mai bună.
O abordare mai flexibilă pentru limitarea numărului de linii din text
Această tehnică vă permite să faceți același lucru ca și abordarea webkit, cu aceleași rezultate. Dar marea diferență este că aveți o mulțime de flexibilitate, deoarece setați singur înălțimea. În plus, puteți folosi orice proprietate de afișare sau orice opțiune de stil pe care o preferați.
Pentru a începe, înlocuiți blocul CSS pentru .text tăiat cu asta:
.text tăiat {
--max-linii: 5;
--inaltimea liniei: 1.4;
înălţime: calc(var(--max-linii) * 1ei * var(--inaltimea liniei));
inaltimea liniei: var(--inaltimea liniei);
poziţie: relativ;
}Setarea unei înălțimi a liniei este importantă, deoarece trebuie să o țineți cont atunci când vă determinați înălțimea. Pentru a obține înălțimea, înmulțiți înălțimea liniei cu dimensiunea fontului și numărul de linii.
Adaugam poziție: relativă proprietate deoarece avem nevoie de ea pentru a adăuga efectul de estompare. Adăugați următorul CSS pentru a finaliza efectul:
.text tăiat::inainte de {
conţinut: "";
poziţie: absolut;
înălţime: calc(2ei * var(--inaltimea liniei));
lăţime: 100%;
fund: 0;
pointer-evenimente: nici unul;
fundal: liniar-gradient(lafund, transparent, alb);
}CSS-ul de mai sus estompează ultima linie de text din fiecare card. Puteți obține un efect de estompare folosind fundal proprietate și un gradient. Trebuie să setați pointer-evenimente la nici unul pentru a se asigura că elementul nu este selectabil.
Iată rezultatul:
Această tehnică a obținut același rezultat ca și precedenta (plus neclaritatea la sfârșit). Dar obțineți mai multă flexibilitate pentru a utiliza alte tipuri de machete și modele.
Adăugarea unui buton dinamic de extindere și restrângere
Adăugarea unui buton de extindere/restrângere face cărțile mai realiste și mai interactive. Cu acest model, extindeți conținutul făcând clic pe Extinde butonul, după care textul se schimbă în Colaps. Prin urmare, textul butonului comută între „Extindere” și „Reducere” pe măsură ce faceți clic pe el. În plus, restul conținutului se afișează și se ascunde în fiecare stare respectivă.
Ai definit deja un intrare element din HTML. Acest element va servi drept buton. Pentru a stila această intrare într-un buton, includeți următorul CSS în foaia de stil:
.expand-btn {
aspect: nici unul;
frontieră: 1pxsolidnegru;
căptușeală: .5em;
hotar-raza: .25em;
cursor: indicator;
margine-top: 1rem;
}Când treceți cursorul pe buton, doriți să schimbați culoarea de fundal:
.expand-btn:planare {
culoare de fundal: #ccc;
}Acum CSS pentru comutarea textului atunci când este bifată intrarea:
.expand-btn::inainte de {
conţinut: "Extinde"
}
.expand-btn:verificat::inainte de {
conţinut: "Colaps"
}
Acum, când faceți clic pe butonul/intrare, textul trece de la Extinde la Colaps. Dar conținutul în sine nu se va extinde încă. Pentru a face acest lucru când faceți clic pe butonul, adăugați următorul CSS:
.text tăiat:are(+.expand-btn:verificat) {
înălţime: auto;
}Acest exemplu folosește has() Selector CSS pentru a viza elementul. Cu acest cod, spui că, dacă zona de text tăiată are un buton de extindere bifat, înălțimea cardului ar trebui să fie auto (care o extinde).
Iată rezultatul:
Alte sfaturi și trucuri CSS de învățat
Acest articol a demonstrat două metode diferite pentru limitarea numărului de linii dintr-o casetă folosind CSS. Am adăugat chiar și un buton pentru extinderea/restrângerea conținutului fără a scrie o singură linie de JavaScript.
Dar există o mulțime de alte sfaturi și trucuri în CSS. Aceste sfaturi vă oferă o modalitate creativă de a realiza machetele dorite fără a afecta performanța, lizibilitatea sau accesibilitatea.
