Ota käteen CSS-tekniikka, jonka avulla voit piilottaa sisällön ja paljastaa sen tarvittaessa.
Tekstin määrän rajoittaminen elementissä on yleinen web-suunnitteluvaatimus. Näet usein artikkelin, jossa on kolmi- tai nelirivinen ote ja painike, jonka avulla voit laajentaa koko tekstiä.
Voit luoda tämän mallin käyttämällä CSS: n ja JavaScriptin yhdistelmää. Mutta voit tehdä sen myös käyttämällä yksin CSS: ää. Tutustu kahteen tapaan rajoittaa laatikon tekstiä ja miten voit luoda dynaamisen laajennuspainikkeen käyttämällä vain CSS: ää.
Webkit-tekniikka
Luo tyhjä kansio ja muokkaa sen sisällä kahta tiedostoa: index.html ja tyyli.css. Sisällä index.html tiedosto, luo HTML-runko:
html>
<htmllang="en"><pää>
<otsikko>Asiakirjaotsikko>
<linkkirel="tyylitaulukko"href="tyyli.css">
pää><kehon>
kehon>
html>
Linkki kohdassa osastolle tyyli.css tiedosto, varmistaa, että kaikki tiedostoon lisäämäsi CSS-koodit koskevat tätä sivua. Liitä seuraavaksi seuraava HTML-merkintä tunnisteet sisään index.html:
<osioluokkaa="korttiryhmä">
<artiklaluokkaa="kortti">
<h2>Artikla 1h2><sluokkaa="katkoteksti">
300 sanan teksti menee tähän
s><syöttötyyppi="valintaruutu"luokkaa="expand-btn">
artikla><artiklaluokkaa="kortti">
<h2>2 artiklah2><sluokkaa="katkoteksti">
200 sanan teksti menee tähän
s><syöttötyyppi="valintaruutu"luokkaa="expand-btn">
artikla><artiklaluokkaa="kortti">
<h2>Artikla 1h2><sluokkaa="katkoteksti">
100 sanan teksti menee tähän
s>
<syöttötyyppi="valintaruutu"luokkaa="expand-btn">
artikla>
osio>
Tämän HTML: n rakenne on yksinkertainen, mutta silti sitä käytetään semanttinen merkintä käytettävyyttä varten. Osaelementti sisältää kolme artikkelielementtiä. Jokainen artikkeli sisältää otsikon, kappaleen ja syöttöelementin. Käytät CSS: n tyyliä kunkin artikkelin osion muotoilemiseen kortiksi.
Sillä välin sivusi näyttää tältä:
Yllä olevasta kuvasta näet eripituisia tekstiä kussakin kappaleessa. Ensimmäisessä 300 sanaa, toisessa 200 sanaa ja kolmannessa 100 sanaa.
Seuraava askel on aloittaa sivun muotoilu lisäämällä CSS: ään tyyli.css tiedosto. Aloita nollaamalla asiakirjan reunus ja antamalla rungolle valkoinen taustaväri:
*, *::ennen, *::jälkeen {
laatikon kokoinen: raja-laatikko;
}
kehon {
tausta: #f3f3f3;
ylivuoto: piilotettu;
}
Muuta seuraavaksi elementti korttiryhmäluokalla kolmen sarakkeen ruudukkosäiliöksi. Jokainen artikkeliosio sisältää sarakkeen:
.card-ryhmä {
näyttö: ruudukko;
ruudukko-malli-sarakkeet: toistaa(3, 1fr);
aukko: .5 rem;
kohdista-kohteet: flex-start;
}Muotoile jokainen artikkeliosio korteiksi, jossa on valkoinen taustaväri ja musta, hieman pyöreä reunus:
.kortti {
tausta: valkoinen;
pehmuste: 1rem;
rajaa: 1pxkiinteämusta;
raja-säde: .25 em;
}Lisää lopuksi marginaaleja:
h2, s {
marginaali: 0;
}
h2 {
marginaali-ala: 1rem;
}
Tallenna tiedosto ja tarkista selaimesi. Sivun pitäisi näyttää alla olevan kuvan sivulta:
Seuraava vaihe on leikata kunkin tekstin rivien määrä kolmeen. Tässä on CSS sitä varten:
.cuttoff-teksti {
--max-rivit: 3;
ylivuoto: piilotettu;
näyttö: -webkit-laatikko;
-webkit-box-orient: pystysuora;
-webkit-line-clamp: var(--max-rivit);
}
Aloita asettamalla CSS-muuttuja, max-rivejä, 3 ja piilottaa ylitulvan sisällön. Aseta sitten näyttö asentoon -webkit-laatikko ja kiinnitä linja 3:een.
Seuraava kuva näyttää tuloksen. Jokaisen kortin kolmannella tekstirivillä näkyy ellipsi:
Tämä tekniikka voi olla melko hankala toteuttaa. Jos jättäisit pois minkä tahansa ominaisuuden, kaikki menee rikki. Toinen haittapuoli on, että et voi käyttää muuta näyttöominaisuutta kuin --webkit-box. Saatat esimerkiksi haluta käytä Gridiä tai Flexboxia. Näistä syistä seuraava tekniikka on parempi.
Joustavampi tapa rajoittaa tekstin rivien määrää
Tämän tekniikan avulla voit tehdä saman asian kuin webkit-lähestymistapa, samoilla tuloksilla. Mutta suuri ero on, että sinulla on paljon joustavuutta, koska asetat korkeuden itse. Lisäksi voit käyttää mitä tahansa näyttöominaisuutta tai mitä tahansa haluamaasi tyylivaihtoehtoa.
Aloita korvaamalla CSS-lohko for .cutoff-teksti tämän kanssa:
.cuttoff-teksti {
--max-rivit: 5;
--viivankorkeus: 1.4;
korkeus: lask(var(--max-rivit) * 1em * var(--viivankorkeus));
viivankorkeus: var(--viivankorkeus);
asema: suhteellinen;
}Viivan korkeuden asettaminen on tärkeää, koska sinun on otettava se huomioon korkeuttasi määritettäessä. Korkeuden saamiseksi kerrot rivin korkeuden kirjasinkoolla ja rivien lukumäärällä.
Me lisäämme asema: suhteellinen ominaisuutta, koska tarvitsemme sitä häivytysefektin lisäämiseen. Lisää seuraava CSS viimeistelläksesi tehosteen:
.cuttoff-teksti::ennen {
sisältö: "";
asema: ehdoton;
korkeus: lask(2em * var(--viivankorkeus));
leveys: 100%;
pohja: 0;
osoitin-tapahtumat: ei mitään;
tausta: lineaarinen gradientti(topohja, läpinäkyvä, valkoinen);
}Yllä oleva CSS hämärtää jokaisen kortin viimeisen tekstirivin. Voit saavuttaa haalistuvan vaikutuksen käyttämällä tausta ominaisuus ja kaltevuus. Sinun on asetettava osoitin-tapahtumat to ei mitään varmistaaksesi, että elementti ei ole valittavissa.
Tässä tulos:
Tällä tekniikalla saavutettiin sama tulos kuin edellinen (plus sumeus lopussa). Mutta saat enemmän joustavuutta käyttää muunlaisia asetteluja ja malleja.
Dynaamisen laajennus- ja tiivistyspainikkeen lisääminen
Laajenna/kutista-painikkeen lisääminen tekee korteista realistisempia ja interaktiivisempia. Tämän mallin avulla voit laajentaa sisältöä napsauttamalla Laajentaa -painiketta, jonka jälkeen teksti muuttuu muotoon Romahdus. Joten painikkeen teksti vaihtuu "Laajenna" ja "Kutista" välillä, kun napsautat sitä. Lisäksi muu sisältö näkyy ja piiloutuu kussakin vastaavassa tilassa.
Olet jo määrittänyt syöttö elementtiä HTML-koodissasi. Tämä elementti toimii painikkeena. Jos haluat muotoilla tämän syötteen painikkeeksi, sisällytä tyylisivuusi seuraava CSS:
.expand-btn {
ulkomuoto: ei mitään;
rajaa: 1pxkiinteämusta;
pehmuste: .5em;
raja-säde: .25 em;
kohdistin: osoitin;
marginaali yläosa: 1rem;
}Kun pidät osoittimen painikkeen päällä, haluat muuttaa taustaväriä:
.expand-btn:hover {
taustaväri: #ccc;
}Nyt CSS tekstin vaihtamiseen, kun syöttö on valittuna:
.expand-btn::ennen {
sisältö: "Laajentaa"
}
.expand-btn:tarkistettu::ennen {
sisältö: "Romahdus"
}
Nyt kun napsautat painiketta/syöttöä, teksti lähtee Laajentaa to Romahdus. Mutta itse sisältö ei vielä laajene. Jos haluat tehdä niin, kun napsautat painiketta, lisää seuraava CSS:
.cuttoff-teksti:has(+.expand-btn:tarkistettu) {
korkeus: auto;
}Tämä esimerkki käyttää has() CSS-valitsin elementin kohdistamiseksi. Tällä koodilla tarkoitat, että jos rajatulla tekstialueella on valittu laajennuspainike, kortin korkeuden tulee olla auto (joka laajentaa sitä).
Tässä tulos:
Muita CSS-vinkkejä ja temppuja opittavaksi
Tässä artikkelissa esitettiin kaksi erilaista tapaa rajoittaa laatikon rivien määrää CSS: n avulla. Lisäsimme jopa painikkeen sisällön laajentamiseksi/kutistamiseksi kirjoittamatta yhtään JavaScript-riviä.
Mutta CSS: ssä on paljon muita vinkkejä ja temppuja. Nämä vinkit tarjoavat sinulle luovan tavan saavuttaa haluamasi asettelut suorituskykyä, luettavuutta tai käytettävyyttä heikentämättä.
