Spoznajte priročno tehniko CSS, s katero lahko skrijete vsebino in jo razkrijete na zahtevo.
Omejitev količine besedila v elementu je pogosta zahteva spletnega oblikovanja. Pogosto boste videli članek s tri- ali štirivrstičnim izvlečkom z gumbom, s katerim lahko razširite celotno besedilo.
Ta dizajn lahko ustvarite s kombinacijo CSS in JavaScript. Lahko pa to storite tudi samo s CSS. Odkrijte dva načina za omejitev besedila v polju in kako lahko ustvarite gumb za dinamično razširitev samo s CSS.
Tehnika Webkit
Ustvarite prazno mapo in uredite dve datoteki v njej: index.html in style.css. Znotraj index.html datoteko, ustvarite okostje HTML:
html>
<htmljezik="en"><glavo>
<naslov>Dokumentnaslov>
<povezavarel="stylesheet"href="style.css">
glavo><telo>
telo>
html>
Povezava v oddelku, do style.css zagotavlja, da bo vsak CSS, ki ga dodate tej datoteki, veljal za to stran. Nato prilepite naslednjo oznako HTML v oznake v index.html:
<razdelekrazred="skupina kart">
<Članekrazred="kartica">
<h2>člen 1h2><strrazred="izrezano besedilo">
Tukaj gre besedilo s 300 besedami
str><vnosvrsta="potrditveno polje"razred="razširi-btn">
Članek><Članekrazred="kartica">
<h2>člen 2h2><strrazred="izrezano besedilo">
200-besedno besedilo gre sem
str><vnosvrsta="potrditveno polje"razred="razširi-btn">
Članek><Članekrazred="kartica">
<h2>člen 1h2><strrazred="izrezano besedilo">
Sem gre 100-besedno besedilo
str>
<vnosvrsta="potrditveno polje"razred="razširi-btn">
Članek>
razdelek>
Struktura tega HTML-ja je preprosta, vendar še vedno uporablja pomenske oznake za dostopnost. Element razdelka vsebuje tri elemente artikla. Vsak članek vsebuje naslov, odstavek in vnosni element. Uporabili boste CSS, da boste vsak razdelek članka oblikovali v kartico.
Medtem bo vaša stran videti takole:
Na zgornji sliki lahko vidite različne dolžine besedila v vsakem odstavku. 300 besed v prvem, 200 besed v drugem in 100 v tretjem.
Naslednji korak je, da začnete oblikovati stran z dodajanjem CSS v style.css mapa. Začnite tako, da ponastavite obrobo na dokumentu in telesu dodelite belo ozadje:
*, *::prej, *::po {
velikost škatle: border-box;
}
telo {
ozadje: #f3f3f3;
preliv: skrit;
}
Nato spremenite element z razredom skupine kartic v vsebnik mreže s tremi stolpci. Vsak razdelek članka zavzema stolpec:
.card-skupina {
zaslon: mreža;
mreža-predloga-stolpci: ponovite(3, 1fr);
vrzel: .5rem;
align-items: flex-start;
}Oblikujte vsak del članka kot kartico z belo barvo ozadja in črno, rahlo okroglo obrobo:
.kartica {
ozadje: bela;
oblazinjenje: 1rem;
meja: 1pxtrdnaČrna;
mejni polmer: .25em;
}Na koncu dodajte nekaj robov:
h2, str {
marža: 0;
}
h2 {
margin-bottom: 1rem;
}
Shranite datoteko in preverite brskalnik. Stran bi morala izgledati kot stran, prikazana na spodnji sliki:
Naslednji korak je zmanjšanje števila vrstic za vsako besedilo na 3. Tukaj je CSS za to:
.cuttoff-besedilo {
--max-lines: 3;
preliv: skrit;
zaslon: -webkit-box;
-webkit-box-orient: navpično;
-objemka-line-webkit: var(--max-lines);
}
Začnite z nastavitvijo spremenljivko CSS, max-lines, do 3 in skrivanje prelivajoče se vsebine. Nato nastavite zaslon na -webkit-box in pripnite vrvico na 3.
Naslednja slika prikazuje rezultat. Vsaka kartica prikazuje elipso v tretji vrstici besedila:
To tehniko je lahko precej težavno izvesti. Če bi izpustili katero koli lastnost, se bo vse pokvarilo. Druga pomanjkljivost je, da ne morete uporabiti lastnosti prikaza razen --webkit-box. Na primer, morda boste želeli uporabite Grid ali Flexbox. Zaradi teh razlogov je naslednja tehnika boljša.
Prilagodljivejši pristop k omejevanju števila vrstic v besedilu
Ta tehnika vam omogoča, da naredite isto kot pristop webkit, z enakimi rezultati. Toda velika razlika je v tem, da imate ogromno prilagodljivosti, saj višino nastavljate sami. Poleg tega lahko uporabite katero koli lastnost prikaza ali katero koli možnost oblikovanja, ki vam je ljubša.
Za začetek zamenjajte blok CSS za .cutoff-besedilo s tem:
.cuttoff-besedilo {
--max-lines: 5;
--višina vrstice: 1.4;
višina: kalk(var(--max-lines) * 1em * var(--višina vrstice));
višina vrstice: var(--višina vrstice);
položaj: relativno;
}Nastavitev višine črte je pomembna, ker jo morate upoštevati pri določanju vaše višine. Višino dobite tako, da višino vrstice pomnožite z velikostjo pisave in številom vrstic.
Dodamo položaj: relativno ker jo potrebujemo za dodajanje učinka bledenja. Za dokončanje učinka dodajte naslednji CSS:
.cuttoff-besedilo::prej {
vsebino: "";
položaj: absolutno;
višina: kalk(2em * var(--višina vrstice));
premer: 100%;
dno: 0;
kazalec-dogodki: nič;
ozadje: linearni gradient(dodno, pregleden, bela);
}Zgornji CSS zamegli zadnjo vrstico besedila na vsaki kartici. Učinek bledenja lahko dosežete z uporabo ozadje lastnost in gradient. Morate nastaviti kazalec-dogodki do nič da zagotovite, da elementa ni mogoče izbrati.
Tukaj je rezultat:
Ta tehnika je dosegla enak rezultat kot prejšnja (plus zamegljenost na koncu). Dobite pa večjo prilagodljivost pri uporabi drugih vrst postavitev in dizajnov.
Dodajanje gumba za dinamično razširitev in strnitev
Če dodate gumb za razširitev/strnitev, so kartice bolj realistične in interaktivne. S tem vzorcem razširite vsebino s klikom na Razširi gumb, po katerem se besedilo spremeni v Strni. Tako se besedilo gumba preklaplja med »Razširi« in »Strni«, ko ga kliknete. Poleg tega se preostala vsebina prikaže in skrije v vsakem stanju.
Ste že definirali vnos element v vašem HTML-ju. Ta element bo služil kot vaš gumb. Če želite oblikovati ta vnos v gumb, vključite naslednji CSS v svoj slogovni list:
.expand-btn {
videz: nič;
meja: 1pxtrdnaČrna;
oblazinjenje: .5em;
mejni polmer: .25em;
kazalec: kazalec;
margin-top: 1rem;
}Ko se premaknete na gumb, želite spremeniti barvo ozadja:
.expand-btn:lebdi {
Barva ozadja: #ccc;
}Zdaj CSS za preklop besedila, ko je vnos preverjen:
.expand-btn::prej {
vsebino: "Razširi"
}
.expand-btn:preverjeno::prej {
vsebino: "Strni"
}
Zdaj, ko kliknete gumb/vnos, gre besedilo iz Razširi do Strni. A sama vsebina se še ne bo razširila. Če želite to narediti, ko kliknete gumb, dodajte naslednji CSS:
.cuttoff-besedilo:ima(+.expand-btn:preverjeno) {
višina: avto;
}Ta primer uporablja has() Izbirnik CSS za ciljanje elementa. S to kodo pravite, da če ima obrezano besedilno območje označen gumb za razširitev, mora biti višina kartice avto (ki ga razširi).
Tukaj je rezultat:
Drugi nasveti in triki za CSS, ki se jih morate naučiti
Ta članek prikazuje dve različni metodi za omejevanje števila vrstic v polju s pomočjo CSS. Dodali smo celo gumb za razširitev/strnitev vsebine, ne da bi napisali eno vrstico JavaScripta.
Toda v CSS obstaja ogromno drugih nasvetov in trikov. Ti nasveti vam ponujajo kreativen način za doseganje želenih postavitev brez škode za zmogljivost, berljivost ali dostopnost.
