Saate hakkama käepärase CSS-i tehnikaga, mida saate kasutada sisu peitmiseks ja nõudmisel paljastamiseks.
Elemendi tekstihulga piiramine on levinud veebidisaini nõue. Sageli näete artiklit, millel on kolme- või neljarealine väljavõte koos nupuga, mis võimaldab teil täisteksti laiendada.
Selle kujunduse saate luua CSS-i ja JavaScripti kombinatsiooni abil. Kuid saate seda teha ka ainult CSS-i kasutades. Avastage kaks võimalust kasti teksti piiramiseks ja kuidas saate luua dünaamilise laiendamisnupu, kasutades ainult CSS-i.
Veebikomplekti tehnika
Looge tühi kaust ja muutke selles kahte faili: index.html ja stiil.css. Sees index.html faili, looge HTML-skelett:
html>
<htmllang="en"><pea>
<pealkiri>Dokumentpealkiri>
<linkrel="laadileht"href="stiil.css">
pea><keha>
keha>
html>
Link lehel jaotisesse stiil.css faili, tagab, et kõik CSS, mille sellesse faili lisate, rakenduvad sellele lehele. Järgmisena kleepige järgmine HTML-i märgistus jaotisesse sildid sisse index.html:
<osaklass="kaardigrupp">
<artiklitklass="kaart">
<h2>Artikkel 1h2><lkklass="lõiketekst">
Siia läheb 300-sõnaline tekst
lk><sisendtüüp="märkeruut"klass="laienda-btn">
artiklit><artiklitklass="kaart">
<h2>Artikkel 2h2><lkklass="lõiketekst">
Siia läheb 200-sõnaline tekst
lk><sisendtüüp="märkeruut"klass="laienda-btn">
artiklit><artiklitklass="kaart">
<h2>Artikkel 1h2><lkklass="lõiketekst">
Siia läheb 100-sõnaline tekst
lk>
<sisendtüüp="märkeruut"klass="laienda-btn">
artiklit>
osa>
Selle HTML-i struktuur on lihtne, kuid siiski kasutatakse seda semantiline märgistus juurdepääsetavuse tagamiseks. Jaotise element sisaldab kolme artiklielementi. Iga artikkel koosneb pealkirjast, lõigust ja sisendelemendist. Iga artikli jaotise kaardistamiseks kasutate CSS-i.
Vahepeal näeb teie leht välja selline:
Ülaltoodud pildilt näete igas lõigus erineva pikkusega teksti. 300 sõna esimeses, 200 sõna teises ja 100 kolmandas.
Järgmine samm on alustada lehe stiili kujundamist, lisades sellele CSS-i stiil.css faili. Alustuseks lähtestage dokumendi ääris ja andke kehale valge taustavärv:
*, *:: enne, *::pärast {
kasti suuruse määramine: ääris-kast;
}
keha {
taustal: #f3f3f3;
ülevool: peidetud;
}
Järgmiseks muutke kaardirühma klassiga element kolme veeruga ruudustiku konteineriks. Iga artikli jaotis hõlmab veergu:
.kaart-grupp {
kuva: võre;
ruudustik-mall-veerud: korda(3, 1fr);
lõhe: .5rem;
joondada-üksused: flex-start;
}Stiilige iga artikli jaotis valge taustavärvi ja musta, kergelt ümara äärisega kaardina:
.kaart {
taustal: valge;
polsterdus: 1rem;
piir: 1pxtahkemust;
piiriraadius: .25em;
}Lõpuks lisage mõned veerised:
h2, lk {
marginaal: 0;
}
h2 {
margin-alumine: 1rem;
}
Salvestage fail ja kontrollige oma brauserit. Leht peaks välja nägema nagu alloleval pildil näidatud leht:
Järgmine samm on vähendada iga teksti ridade arvu 3-ni. Siin on selle jaoks mõeldud CSS:
.cuttoff-tekst {
--max-read: 3;
ülevool: peidetud;
kuva: -veebikomplekti kast;
-webkit-box-orient: vertikaalne;
-webkit-line-klamber: var(--max-read);
}
Alusta seadistamisest CSS-i muutuja, max-lines, kuni 3 ja peites ülevoolava sisu. Seejärel seadke ekraan asendisse -veebikomplekti kast ja kinnitage joon punktiga 3.
Järgmine pilt näitab tulemust. Igal kaardil on kolmandal tekstireal ellips:
Selle tehnika kasutamine võib olla üsna keeruline. Kui jätate mõne vara välja, läheb kõik katki. Teine puudus on see, et te ei saa kasutada muud kuvamisomadust peale --veebikomplekti kast. Näiteks võite soovida kasutage Grid või Flexbox. Nendel põhjustel on parem järgmine tehnika.
Paindlikum lähenemisviis teksti ridade arvu piiramiseks
See tehnika võimaldab teil teha sama, mida veebikomplekti lähenemisviis, samade tulemustega. Kuid suur erinevus seisneb selles, et teil on palju paindlikkust, kuna määrate kõrguse ise. Lisaks saate kasutada mis tahes kuva omadust või mis tahes stiilivalikut, mida eelistate.
Alustamiseks asendage CSS-i plokk .cutoff-text sellega:
.cuttoff-tekst {
--max-read: 5;
--reakõrgus: 1.4;
kõrgus: arvut(var(--max-read) * 1em * var(--reakõrgus));
reakõrgus: var(--reakõrgus);
positsiooni: sugulane;
}Joone kõrguse määramine on oluline, kuna peate seda oma kõrguse määramisel arvesse võtma. Kõrguse saamiseks korrutage rea kõrgus fondi suuruse ja ridade arvuga.
Lisame asend: suhteline omadus, kuna vajame seda tuhmumisefekti lisamiseks. Efekti lõpuleviimiseks lisage järgmine CSS:
.cuttoff-tekst:: enne {
sisu: "";
positsiooni: absoluutne;
kõrgus: arvut(2em * var(--reakõrgus));
laius: 100%;
põhja: 0;
osuti-sündmused: mitte ühtegi;
taustal: lineaarne gradient(juurdepõhja, läbipaistev, valge);
}Ülaltoodud CSS hägustab iga kaardi viimase tekstirea. Saate saavutada tuhmumisefekti kasutades taustal omadus ja gradient. Peate seadistama osuti-sündmused juurde mitte ühtegi tagamaks, et elementi ei saa valida.
Siin on tulemus:
Selle tehnikaga saavutati sama tulemus, mis eelmisega (pluss hägusus lõpus). Kuid muud tüüpi paigutuste ja kujunduste kasutamiseks saate rohkem paindlikkust.
Dünaamilise laiendamise ja ahendamise nupu lisamine
Laiendamis-/ahendamise nupu lisamine muudab kaardid realistlikumaks ja interaktiivsemaks. Selle mustriga saate sisu laiendada, klõpsates nuppu Laienda nuppu, mille järel tekst muutub järgmiseks Ahenda. Nii lülitub nupu tekst "Laienda" ja "Ahenda" vahel, kui sellel klõpsate. Lisaks kuvatakse ja peidetakse ülejäänud sisu igas vastavas olekus.
Olete juba määratlenud sisend HTML-i elementi. See element toimib teie nupuna. Selle sisendi stiiliks nupuks lisamiseks lisage oma stiililehele järgmine CSS:
.expand-btn {
välimus: mitte ühtegi;
piir: 1pxtahkemust;
polsterdus: .5em;
piiriraadius: .25em;
kursor: osuti;
margin-top: 1rem;
}Kui hõljutate kursorit nupul, soovite muuta taustavärvi:
.expand-btn:hõljuma {
taustavärv: #ccc;
}Nüüd CSS teksti vahetamiseks, kui sisend on kontrollitud:
.expand-btn:: enne {
sisu: "Laienda"
}
.expand-btn:kontrollitud:: enne {
sisu: "Ahenda"
}
Nüüd, kui klõpsate nuppu/sisendit, läheb tekst aadressilt Laienda juurde Ahenda. Aga sisu ise veel ei laiene. Selleks, et seda nupul klõpsates teha, lisage järgmine CSS:
.cuttoff-tekst:has(+.expand-btn:kontrollitud) {
kõrgus: auto;
}See näide kasutab has() CSS-i valija elemendi sihtimiseks. Selle koodiga ütlete, et kui väljalõigatud tekstialal on märgitud laiendamisnupp, peaks kaardi kõrgus olema auto (mis laiendab seda).
Siin on tulemus:
Muud CSS-i näpunäited ja nipid, mida õppida
See artikkel demonstreeris kahte erinevat meetodit kasti ridade arvu piiramiseks CSS-i abil. Lisasime isegi nupu sisu laiendamiseks/ahendamiseks ilma ühtegi JavaScripti rida kirjutamata.
Kuid CSS-is on palju muid näpunäiteid ja nippe. Need näpunäited pakuvad teile loomingulist viisi soovitud paigutuste saavutamiseks ilma jõudlust, loetavust või juurdepääsetavust kahjustamata.