Få tak i en hendig CSS-teknikk du kan bruke til å skjule innhold og avsløre det på forespørsel.
Å begrense mengden tekst i et element er et vanlig krav til webdesign. Du vil ofte se en artikkel med et tre- eller firelinjers utdrag med en knapp som lar deg utvide hele teksten.
Du kan lage dette designet ved å bruke en kombinasjon av CSS og JavaScript. Men du kan også gjøre det ved å bruke CSS alene. Oppdag to måter å begrense teksten i en boks på, og hvordan du kan lage en dynamisk utvidelsesknapp med kun CSS.
Webkit-teknikken
Opprett en tom mappe og rediger to filer i den: index.html og style.css. Inne i index.html fil, lag et HTML-skjelett:
html>
<htmllang="no"><hode>
<tittel>Dokumenttittel>
<linkrel="stilark"href="style.css">
hode><kropp>
kropp>
html>
En lenke i seksjon, til style.css fil, sikrer at enhver CSS du legger til i den filen vil gjelde for denne siden. Deretter limer du inn følgende HTML-oppmerking i tagger inn index.html:
<seksjonklasse="kort-gruppe">
<artikkelklasse="kort">
<h2>Artikkel 1 h2><sklasse="avskjæringstekst">
Tekst på 300 ord går her
s><inputtype="avmerkingsboks"klasse="expand-btn">
artikkel><artikkelklasse="kort">
<h2>Artikkel 2h2><sklasse="avskjæringstekst">
Tekst på 200 ord går her
s><inputtype="avmerkingsboks"klasse="expand-btn">
artikkel><artikkelklasse="kort">
<h2>Artikkel 1h2><sklasse="avskjæringstekst">
100-ords tekst går her
s>
<inputtype="avmerkingsboks"klasse="expand-btn">
artikkel>
seksjon>
Strukturen til denne HTML-en er enkel, men den brukes fortsatt semantisk markering for tilgjengelighet. Et seksjonselement inneholder tre artikkelelementer. Hver artikkel består av en overskrift, et avsnitt og et inndataelement. Du bruker CSS til å style hver artikkeldel til et kort.
I mellomtiden vil siden din se slik ut:
Fra bildet ovenfor kan du se forskjellige lengder på teksten i hvert avsnitt. 300 ord i den første, 200 ord i den andre, og 100 i den tredje.
Det neste trinnet er å begynne å style siden ved å legge til CSS i style.css fil. Start med å tilbakestille rammen på dokumentet og gi brødteksten en hvit bakgrunnsfarge:
*, *::før, *::etter {
boksstørrelse: kantboks;
}
kropp {
bakgrunn: #f3f3f3;
flyte: skjult;
}
Deretter gjør du elementet med kortgruppeklassen til en rutenettbeholder med tre kolonner. Hver artikkeldel har en kolonne:
.card-group {
vise: Nett;
rutenett-mal-kolonner: gjenta(3, 1fr);
mellomrom: .5rem;
align-elementer: flex-start;
}Style hver artikkeldel som et kort med hvit bakgrunnsfarge og en svart, litt rund kant:
.kort {
bakgrunn: hvit;
polstring: 1rem;
grense: 1pxfastsvart;
grense-radius: .25em;
}Til slutt, legg til noen marger:
h2, s {
margin: 0;
}
h2 {
marg-bunn: 1rem;
}
Lagre filen og sjekk nettleseren din. Siden skal se ut på siden vist på bildet nedenfor:
Det neste trinnet er å kutte antall linjer for hver tekst til 3. Her er CSS for det:
.cuttoff-tekst {
--max-linjer: 3;
flyte: skjult;
vise: -webkit-boks;
-webkit-box-orient: vertikal;
-webkit-line-klemme: var(--max-linjer);
}
Start med å stille inn en CSS-variabel, max-linjer, til 3 og skjuler overfylt innhold. Still deretter skjermen til -webkit-boks og klem ledningen til 3.
Følgende bilde viser resultatet. Hvert kort viser en ellipse på den tredje tekstlinjen:
Denne teknikken kan være ganske vanskelig å få til. Hvis du skulle utelate noen eiendom, vil alt gå i stykker. En annen ulempe er at du ikke kan bruke en visningsegenskap annet enn --webkit-boks. Det kan for eksempel være lurt bruk Grid eller Flexbox. Av disse grunner er følgende teknikk bedre.
En mer fleksibel tilnærming til å begrense antall linjer i tekst
Denne teknikken lar deg gjøre det samme som webkit-tilnærmingen, med de samme resultatene. Men den store forskjellen er at du har tonnevis av fleksibilitet fordi du angir høyden selv. I tillegg kan du bruke hvilken som helst skjermeiendom eller hvilket stylingsalternativ du foretrekker.
For å komme i gang, bytt ut CSS-blokken for .cutoff-tekst med dette:
.cuttoff-tekst {
--max-linjer: 5;
--linjehøyde: 1.4;
høyde: beregnet(var(--max-linjer) * 1em * var(--linjehøyde));
linjehøyde: var(--linjehøyde);
posisjon: slektning;
}Å angi en linjehøyde er viktig fordi du må ta hensyn til den når du bestemmer høyden din. For å få høyden multipliserer du linjehøyden med skriftstørrelsen din og antall linjer.
Vi legger til stilling: pårørende egenskapen fordi vi trenger den for å legge til fade-effekten. Legg til følgende CSS for å fullføre effekten:
.cuttoff-tekst::før {
innhold: "";
posisjon: absolutt;
høyde: beregnet(2em * var(--linjehøyde));
bredde: 100%;
bunn: 0;
peker-hendelser: ingen;
bakgrunn: lineær gradient(tilbunn, gjennomsiktig, hvit);
}CSS-en ovenfor gjør den siste tekstlinjen i hvert kort uskarp. Du kan oppnå en falmingseffekt ved å bruke bakgrunn egenskap og en gradient. Du må stille inn peker-hendelser til ingen for å sikre at elementet ikke er valgbart.
Her er resultatet:
Denne teknikken oppnådde samme resultat som den forrige (pluss uskarphet på slutten). Men du får mer fleksibilitet til å bruke andre typer oppsett og design.
Legge til en dynamisk utvidelses- og skjulknapp
Å legge til en utvide/skjul knapp gjør kortene mer realistiske og interaktive. Med dette mønsteret utvider du innholdet ved å klikke på Utvide knappen, hvoretter teksten endres til Kollapse. Så knappens tekst veksler mellom "Utvid" og "Skjul" når du klikker på den. Videre vises og skjules resten av innholdet i hver respektive tilstand.
Du har allerede definert en input element i HTML-en din. Dette elementet vil fungere som din knapp. For å style denne inngangen til en knapp, ta med følgende CSS i stilarket ditt:
.expand-btn {
utseende: ingen;
grense: 1pxfastsvart;
polstring: .5em;
grense-radius: .25em;
markøren: pekeren;
marg-topp: 1rem;
}Når du holder musepekeren på knappen, vil du endre bakgrunnsfargen:
.expand-btn:sveve {
bakgrunnsfarge: #ccc;
}Nå CSS for å bytte tekst når inndata er sjekket:
.expand-btn::før {
innhold: "Utvide"
}
.expand-btn:krysset av::før {
innhold: "Kollapse"
}
Når du nå klikker på knappen/inndata, går teksten fra Utvide til Kollapse. Men selve innholdet vil ikke utvides ennå. For å få det til å gjøre det når du klikker på knappen, legg til følgende CSS:
.cuttoff-tekst:har(+.expand-btn:krysset av) {
høyde: auto;
}Dette eksemplet bruker has() CSS-velger for å målrette elementet. Med denne koden sier du at hvis avskjæringstekstområdet har en avkrysset utvidelsesknapp, skal høyden på kortet være auto (som utvider den).
Her er resultatet:
Andre CSS-tips og triks for å lære
Denne artikkelen demonstrerte to forskjellige metoder for å begrense antall linjer i en boks ved hjelp av CSS. Vi har til og med lagt til en knapp for å utvide/skjule innholdet uten å skrive en eneste linje med JavaScript.
Men det er tonnevis av andre tips og triks i CSS. Disse tipsene gir deg en kreativ måte å oppnå ønsket layout uten å skade ytelsen, lesbarheten eller tilgjengeligheten.