Få styr på en praktisk CSS-teknik, du kan bruge til at skjule indhold og afsløre det efter behov.
At begrænse mængden af tekst i et element er et almindeligt krav til webdesign. Du vil ofte se en artikel med et uddrag på tre eller fire linjer med en knap, der lader dig udvide hele teksten.
Du kan oprette dette design ved hjælp af en kombination af CSS og JavaScript. Men du kan også gøre det ved at bruge CSS alene. Opdag to måder at begrænse teksten i en boks på, og hvordan du kan oprette en dynamisk udvidelsesknap ved hjælp af CSS.
Webkit-teknikken
Opret en tom mappe og rediger to filer i den: index.html og style.css. Inde i index.html fil, opret et HTML-skelet:
html>
<htmllang="da"><hoved>
<titel>Dokumenttitel>
<linkrel="stylesheet"href="style.css">
hoved><legeme>
legeme>
html>
Et link i afsnit, til style.css fil, sikrer, at enhver CSS, du tilføjer til denne fil, vil gælde for denne side. Indsæt derefter følgende HTML-markering i tags ind index.html:
<afsnitklasse="kort-gruppe">
<artikelklasse="kort">
<h2>Artikel 1h2><sklasse="afskæringstekst">
Tekst på 300 ord kommer her
s><inputtype="afkrydsningsfelt"klasse="expand-btn">
artikel><artikelklasse="kort">
<h2>Artikel 2h2><sklasse="afskæringstekst">
Tekst på 200 ord kommer her
s><inputtype="afkrydsningsfelt"klasse="expand-btn">
artikel><artikelklasse="kort">
<h2>Artikel 1h2><sklasse="afskæringstekst">
Tekst på 100 ord kommer her
s>
<inputtype="afkrydsningsfelt"klasse="expand-btn">
artikel>
afsnit>
Strukturen af denne HTML er enkel, men den bruger den stadig semantisk markup for tilgængelighed. Et sektionselement indeholder tre artikelelementer. Hver artikel består af en overskrift, et afsnit og et inputelement. Du skal bruge CSS til at style hver artikelsektion til et kort.
I mellemtiden vil din side se sådan ud:
Fra billedet ovenfor kan du se forskellige længder af tekst i hvert afsnit. 300 ord i det første, 200 ord i det andet og 100 i det tredje.
Det næste trin er at begynde at style siden ved at tilføje CSS til style.css fil. Start med at nulstille rammen på dokumentet og give brødteksten en hvid baggrundsfarve:
*, *::Før, *::efter {
kassestørrelse: grænse-kasse;
}
legeme {
baggrund: #f3f3f3;
flyde over: skjult;
}
Drej derefter elementet med kortgruppeklassen til en gitterbeholder med tre kolonner. Hver artikelsektion optager en kolonne:
.kort-gruppe {
Skærm: gitter;
gitter-skabelon-kolonner: gentage(3, 1fr);
hul: .5rem;
align-elementer: flex-start;
}Style hver artikelsektion som et kort med hvid baggrundsfarve og en sort, let rund kant:
.kort {
baggrund: hvid;
polstring: 1rem;
grænse: 1pxsolidsort;
grænse-radius: .25em;
}Tilføj endelig nogle marginer:
h2, s {
margen: 0;
}
h2 {
margin-bund: 1rem;
}
Gem filen og tjek din browser. Siden skal se ud på den side, der er vist på billedet nedenfor:
Det næste trin er at skære antallet af linjer for hver tekst ned til 3. Her er CSS'en til det:
.cuttoff-tekst {
--max-linjer: 3;
flyde over: skjult;
Skærm: -webkit-boks;
-webkit-box-orient: lodret;
-webkit-line-clamp: var(--max-linjer);
}
Start med at indstille en CSS-variabel, max-linjer, til 3 og skjuler overfyldt indhold. Indstil derefter displayet til -webkit-boks og klem ledningen til 3.
Følgende billede viser resultatet. Hvert kort viser en ellipse på den tredje tekstlinje:
Denne teknik kan være ret vanskelig at udføre. Hvis du skulle udelade en ejendom, så går alt i stykker. En anden ulempe er, at du ikke kan bruge en display-egenskab andet end --webkit-boks. Det kan du for eksempel gerne brug Grid eller Flexbox. Af disse grunde er følgende teknik bedre.
En mere fleksibel tilgang til at begrænse antallet af linjer i tekst
Denne teknik giver dig mulighed for at gøre det samme som webkit-tilgangen med de samme resultater. Men den store forskel er, at du har masser af fleksibilitet, fordi du selv indstiller højden. Derudover kan du bruge enhver visningsegenskab eller hvilken som helst stylingmulighed, du foretrækker.
For at komme i gang skal du erstatte CSS-blokken for .cutoff-tekst med dette:
.cuttoff-tekst {
--max-linjer: 5;
--linjehøjde: 1.4;
højde: beregnet(var(--max-linjer) * 1em * var(--linjehøjde));
linjehøjde: var(--linjehøjde);
position: i forhold;
}Det er vigtigt at indstille en linjehøjde, fordi du skal tage højde for det, når du bestemmer din højde. For at få højden multiplicerer du linjehøjden med din skriftstørrelse og antallet af linjer.
Vi tilføjer stilling: relativ egenskab, fordi vi har brug for den for at tilføje fade-effekten. Tilføj følgende CSS for at fuldføre effekten:
.cuttoff-tekst::Før {
indhold: "";
position: absolut;
højde: beregnet(2em * var(--linjehøjde));
bredde: 100%;
bund: 0;
pointer-begivenheder: ingen;
baggrund: lineær gradient(tilbund, gennemsigtig, hvid);
}Ovenstående CSS slører den sidste tekstlinje på hvert kort. Du kan opnå en fading-effekt ved hjælp af baggrund egenskab og en gradient. Du skal indstille pointer-begivenheder til ingen for at sikre, at elementet ikke kan vælges.
Her er resultatet:
Denne teknik opnåede det samme resultat som den forrige (plus sløringen i slutningen). Men du får mere fleksibilitet til at bruge andre former for layout og design.
Tilføjelse af en dynamisk udvid- og skjul-knap
Tilføjelse af en udvid/skjul-knap gør kortene mere realistiske og interaktive. Med dette mønster udvider du indholdet ved at klikke på Udvide knap, hvorefter teksten ændres til Bryder sammen. Så knappens tekst skifter mellem "Udvid" og "Skjul", når du klikker på den. Desuden vises og skjules resten af indholdet i hver respektive tilstand.
Du har allerede defineret en input element i din HTML. Dette element vil fungere som din knap. For at style dette input til en knap skal du inkludere følgende CSS i dit typografiark:
.expand-btn {
udseende: ingen;
grænse: 1pxsolidsort;
polstring: .5em;
grænse-radius: .25em;
cursoren: pointer;
margin-top: 1rem;
}Når du svæver på knappen, vil du ændre baggrundsfarven:
.expand-btn:hover {
baggrundsfarve: #ccc;
}Nu CSS til at skifte tekst, når input er markeret:
.expand-btn::Før {
indhold: "Udvide"
}
.expand-btn: tjekket::Før {
indhold: "Bryder sammen"
}
Når du nu klikker på knappen/input, går teksten fra Udvide til Bryder sammen. Men selve indholdet udvides ikke endnu. For at få det til at gøre det, når du klikker på knappen, skal du tilføje følgende CSS:
.cuttoff-tekst:har(+.expand-btn: tjekket) {
højde: auto;
}Dette eksempel bruger har() CSS-vælger til at målrette elementet. Med denne kode siger du, at hvis det afskårne tekstområde har en markeret udvidelsesknap, skal kortets højde være auto (hvilket udvider det).
Her er resultatet:
Andre CSS tips og tricks til at lære
Denne artikel demonstrerede to forskellige metoder til at begrænse antallet af linjer i en boks ved hjælp af CSS. Vi tilføjede endda en knap til at udvide/kollapse indholdet uden at skrive en enkelt linje JavaScript.
Men der er tonsvis af andre tips og tricks i CSS. Disse tips giver dig en kreativ måde at opnå dine ønskede layouts på uden at skade ydeevne, læsbarhed eller tilgængelighed.
