Tekstregels beperken met alleen CSS

Het beperken van de hoeveelheid tekst in een element is een algemene vereiste voor webdesign. Je ziet vaak een artikel met een uittreksel van drie of vier regels met een knop waarmee je de volledige tekst kunt uitvouwen.

U kunt dit ontwerp maken met een combinatie van CSS en JavaScript. Maar u kunt dit ook alleen met CSS doen. Ontdek twee manieren om de tekst in een vak te beperken en hoe u een dynamische uitvouwknop kunt maken met alleen CSS.

De Webkit-techniek

Maak een lege map en bewerk twee bestanden erin: index.html En stijl.css. Binnen in de index.html bestand, maak een HTML-skelet:

html>
<htmllang="en">
<hoofd>
<titel>Documenttitel>
<koppelingrel="stijlblad"href="stijl.css">
hoofd>
<lichaam>
lichaam>
html>

Een link in de afdeling, naar de stijl.css bestand, zorgt ervoor dat elke CSS die u aan dat bestand toevoegt, van toepassing is op deze pagina. Plak vervolgens de volgende HTML-opmaak in het tagt in index.html:

<sectieklas="kaartgroep">
<artikelklas="kaart">
<h2>Artikel 1h2>
<Pklas="afgesneden tekst">
 Hier komt tekst van 300 woorden
P>
<invoertype="vinkje"klas="uitbreiden-btn">
artikel>
<artikelklas="kaart">
<h2>Artikel 2h2>
<Pklas="afgesneden tekst">
 Hier komt tekst van 200 woorden
P>
<invoertype="vinkje"klas="uitbreiden-btn">
artikel>
<artikelklas="kaart">
<h2>Artikel 1h2>
<Pklas="afgesneden tekst">
 Hier komt een tekst van 100 woorden
P>
<invoertype="vinkje"klas="uitbreiden-btn">
artikel>
sectie>

De structuur van deze HTML is eenvoudig, maar het gebruikt nog steeds semantische opmaak voor toegankelijkheid. Een sectie-element bevat drie artikelelementen. Elk artikel bestaat uit een kop, een alinea en een invoerelement. U gebruikt CSS om elke artikelsectie op te maken tot een kaart.

In de tussentijd ziet je pagina er zo uit:

Op de bovenstaande afbeelding ziet u verschillende tekstlengtes in elke alinea. 300 woorden in de eerste, 200 woorden in de tweede en 100 in de derde.

De volgende stap is om de pagina te stylen door CSS toe te voegen aan het stijl.css bestand. Begin met het resetten van de rand op het document en geef de body een witte achtergrondkleur:

*, *::voor, *::na {
maatvoering van de doos: border-box;
}
lichaam {
achtergrond: #f3f3f3;
overloop: verborgen;
}

Verander vervolgens het element met de kaartgroepklasse in een rastercontainer met drie kolommen. Elke artikelsectie neemt een kolom in beslag:

.card-groep {
weergave: rooster;
raster-sjabloon-kolommen: herhalen(3, 1fr);
gat: .5rem;
uitlijnen-items: flex-start;
}

Stijl elk artikelgedeelte als een kaart met een witte achtergrondkleur en een zwarte, enigszins ronde rand:

.kaart {
achtergrond: wit;
opvulling: 1rem;
grens: 1pxstevigzwart;
grensradius: .25em;
}

Voeg ten slotte enkele marges toe:

h2, P {
marge: 0;
}
h2 {
marge-bodem: 1rem;
}

Sla het bestand op en controleer uw browser. De pagina zou eruit moeten zien als de pagina die wordt weergegeven in de onderstaande afbeelding:

De volgende stap is om het aantal regels voor elke tekst terug te brengen tot 3. Hier is de CSS daarvoor:

.cuttoff-tekst {
--max-lijnen: 3; 
overloop: verborgen;

weergave: -webkit-box; 
-webkit-box-orient: verticaal;
-webkit-lijnklem: var(--max-lijnen);
}

Begin met instellen een CSS-variabele, max-lijnen, tot 3 en overlopende inhoud verbergen. Zet dan het beeldscherm op -webkit-box en klem de lijn vast op 3.

De volgende afbeelding toont het resultaat. Elke kaart toont een ellips op de derde tekstregel:

Deze techniek kan behoorlijk lastig zijn om uit te voeren. Als je een eigenschap zou weglaten, gaat alles kapot. Een ander nadeel is dat u geen andere weergave-eigenschap kunt gebruiken dan --webkit-box. Je zou bijvoorbeeld willen gebruik Grid of Flexbox. Om deze redenen is de volgende techniek beter.

Een flexibelere benadering om het aantal regels in tekst te beperken

Met deze techniek kunt u hetzelfde doen als de webkit-aanpak, met dezelfde resultaten. Maar het grote verschil is dat je enorm veel flexibiliteit hebt omdat je zelf de hoogte instelt. Bovendien kunt u elke gewenste weergave-eigenschap of stijloptie gebruiken.

Vervang om te beginnen het CSS-blok voor .cutoff-tekst hiermee:

.cuttoff-tekst {
--max-lijnen: 5;
--lijnhoogte: 1.4;
hoogte: berekend(var(--max-lijnen) * 1em * var(--lijnhoogte));
lijnhoogte: var(--lijnhoogte);
positie: familielid;
}

Het instellen van een lijnhoogte is belangrijk omdat je daar rekening mee moet houden bij het bepalen van je lengte. Om de hoogte te krijgen, vermenigvuldig je de regelhoogte met je lettergrootte en het aantal regels.

We voegen toe positie: relatief eigenschap omdat we deze nodig hebben om het vervagingseffect toe te voegen. Voeg de volgende CSS toe om het effect te voltooien:

.cuttoff-tekst::voor {
inhoud: "";
positie: absoluut;
hoogte: berekend(2em * var(--lijnhoogte));
breedte: 100%;
onderkant: 0;
pointer-gebeurtenissen: geen;
achtergrond: lineair verloop(naaronderkant, transparant, wit);
}

De bovenstaande CSS vervaagt de laatste regel tekst op elke kaart. U kunt een vervagend effect bereiken met behulp van de achtergrond eigenschap en een gradiënt. Je moet instellen pointer-gebeurtenissen naar geen om ervoor te zorgen dat het element niet selecteerbaar is.

Dit is het resultaat:

Deze techniek leverde hetzelfde resultaat op als de vorige (plus de onscherpte aan het einde). Maar u krijgt meer flexibiliteit om andere soorten lay-outs en ontwerpen te gebruiken.

Een dynamische knop voor uitvouwen en samenvouwen toevoegen

Door een knop voor uitvouwen/samenvouwen toe te voegen, worden de kaarten realistischer en interactiever. Met dit patroon vouwt u de inhoud uit door op de te klikken Uitbreiden knop, waarna de tekst verandert in Instorten. Dus de tekst van de knop wisselt tussen "Uitvouwen" en "Samenvouwen" terwijl u erop klikt. Bovendien wordt de rest van de inhoud weergegeven en verborgen in elke respectieve staat.

Je hebt al een gedefinieerd invoer element in uw HTML. Dit element zal dienen als uw knop. Om deze invoer op te maken tot een knop, neemt u de volgende CSS op in uw opmaakmodel:

.expand-btn {
verschijning: geen;
grens: 1pxstevigzwart;
opvulling: .5em;
grensradius: .25em;
cursor: wijzer;
marge-top: 1rem;
}

Wanneer u de muisaanwijzer op de knop plaatst, wilt u de achtergrondkleur wijzigen:

.expand-btn:zweven {
Achtergrond kleur: #ccc;
}

Nu de CSS voor het wisselen van tekst wanneer de invoer is gecontroleerd:

.expand-btn::voor {
inhoud: "Uitbreiden"
}
.expand-btn:gecontroleerd::voor {
inhoud: "Instorten"
}

Wanneer u nu op de knop/invoer klikt, gaat de tekst van Uitbreiden naar Instorten. Maar de inhoud zelf zal nog niet uitbreiden. Voeg de volgende CSS toe om dit te doen wanneer u op de knop klikt:

.cuttoff-tekst:heeft(+.expand-btn:gecontroleerd) {
hoogte: auto;
}

Dit voorbeeld gebruikt de has() CSS-selector om het element te targeten. Met deze code zeg je dat als het afgekapte tekstgebied een aangevinkte uitvouwknop heeft, de hoogte van de kaart auto (wat het uitbreidt).

Dit is het resultaat:

Andere CSS-tips en -trucs om te leren

Dit artikel demonstreerde twee verschillende methoden om het aantal regels in een vak te beperken met behulp van CSS. We hebben zelfs een knop toegevoegd om de inhoud uit te vouwen/samen te vouwen zonder een enkele regel JavaScript te schrijven.

Maar er zijn talloze andere tips en trucs in CSS. Deze tips bieden u een creatieve manier om uw gewenste lay-outs te realiseren zonder de prestaties, leesbaarheid of toegankelijkheid in gevaar te brengen.