Ta reda på en praktisk CSS-teknik som du kan använda för att dölja innehåll och avslöja det på begäran.
Att begränsa mängden text i ett element är ett vanligt krav på webbdesign. Du kommer ofta att se en artikel med ett utdrag på tre eller fyra rader med en knapp som låter dig utöka hela texten.
Du kan skapa den här designen med en kombination av CSS och JavaScript. Men du kan också göra det med enbart CSS. Upptäck två sätt att begränsa texten i en ruta och hur du kan skapa en dynamisk expanderingsknapp med bara CSS.
Webkit-tekniken
Skapa en tom mapp och redigera två filer i den: index.html och style.css. Inuti index.html fil, skapa ett HTML-skelett:
html>
<htmllang="en"><huvud>
<titel>Dokumenteratitel>
<länkrel="stilmall"href="style.css">
huvud><kropp>
kropp>
html>
En länk i avsnitt, till style.css fil, säkerställer att alla CSS du lägger till i den filen kommer att gälla för den här sidan. Klistra sedan in följande HTML-uppmärkning i taggar in index.html:
<sektionklass="kort-grupp">
<artikelklass="kort">
<h2>Artikel 1h2><sidklass="avskärningstext">
Text på 300 ord kommer här
sid><inmatningtyp="kryssruta"klass="expandera-btn">
artikel><artikelklass="kort">
<h2>Artikel 2h2><sidklass="avskärningstext">
Text på 200 ord kommer här
sid><inmatningtyp="kryssruta"klass="expandera-btn">
artikel><artikelklass="kort">
<h2>Artikel 1h2><sidklass="avskärningstext">
Text på 100 ord kommer här
sid>
<inmatningtyp="kryssruta"klass="expandera-btn">
artikel>
sektion>
Strukturen i denna HTML är enkel, men den används fortfarande semantisk uppmärkning för tillgänglighet. Ett avsnittselement innehåller tre artikelelement. Varje artikel består av en rubrik, ett stycke och ett inmatningselement. Du kommer att använda CSS för att utforma varje artikelavsnitt till ett kort.
Under tiden kommer din sida att se ut så här:
Från bilden ovan kan du se olika längder på text i varje stycke. 300 ord i den första, 200 ord i den andra och 100 i den tredje.
Nästa steg är att börja styla sidan genom att lägga till CSS till style.css fil. Börja med att återställa kanten på dokumentet och ge brödtexten en vit bakgrundsfärg:
*, *::innan, *::efter {
lådans storlek: border-box;
}
kropp {
bakgrund: #f3f3f3;
svämma över: dold;
}
Förvandla sedan elementet med kortgruppsklassen till en rutnätsbehållare med tre kolumner. Varje artikelsektion upptar en kolumn:
.card-group {
visa: rutnät;
rutnät-mall-kolumner: upprepa(3, 1fr);
glipa: .5rem;
align-objekt: flex-start;
}Style varje artikelavsnitt som ett kort med vit bakgrundsfärg och en svart, något rund kant:
.kort {
bakgrund: vit;
stoppning: 1rem;
gräns: 1pxfastsvart;
gräns-radie: .25em;
}Lägg slutligen till några marginaler:
h2, sid {
marginal: 0;
}
h2 {
marginal-botten: 1rem;
}
Spara filen och kontrollera din webbläsare. Sidan ska se ut som den som visas i bilden nedan:
Nästa steg är att minska antalet rader för varje text till 3. Här är CSS för det:
.cuttoff-text {
--max-linjer: 3;
svämma över: dold;
visa: -webkit-box;
-webkit-box-orient: vertikal;
-webkit-line-clamp: var(--max-linjer);
}
Börja med att ställa in en CSS-variabel, max-linjer, till 3 och döljer överflödande innehåll. Ställ sedan in displayen på -webkit-box och klämma fast linjen till 3.
Följande bild visar resultatet. Varje kort visar en ellips på den tredje textraden:
Denna teknik kan vara ganska knepig att genomföra. Om du skulle utelämna någon egendom kommer allt att gå sönder. En annan nackdel är att du inte kan använda en visningsegenskap annat än --webkit-box. Till exempel kanske du vill använd Grid eller Flexbox. Av dessa skäl är följande teknik bättre.
Ett mer flexibelt tillvägagångssätt för att begränsa antalet rader i text
Denna teknik låter dig göra samma sak som webkit-metoden, med samma resultat. Men den stora skillnaden är att du har massor av flexibilitet eftersom du ställer in höjden själv. Dessutom kan du använda vilken visningsegenskap som helst eller vilket stilalternativ du föredrar.
För att komma igång, byt ut CSS-blocket för .cutoff-text med detta:
.cuttoff-text {
--max-linjer: 5;
--radavstånd: 1.4;
höjd: beräkn(var(--max-linjer) * 1em * var(--radavstånd));
radavstånd: var(--radavstånd);
placera: relativ;
}Att ställa in en linjehöjd är viktigt eftersom du måste ta hänsyn till det när du bestämmer din längd. För att få höjden multiplicerar du radhöjden med din teckenstorlek och antalet rader.
Vi lägger till position: relativ egenskapen eftersom vi behöver den för att lägga till fade-effekten. Lägg till följande CSS för att slutföra effekten:
.cuttoff-text::innan {
innehåll: "";
placera: absolut;
höjd: beräkn(2em * var(--radavstånd));
bredd: 100%;
botten: 0;
pointer-händelser: ingen;
bakgrund: linjär-gradient(tillbotten, transparent, vit);
}Ovanstående CSS suddar den sista textraden i varje kort. Du kan uppnå en blekningseffekt med hjälp av bakgrund egenskap och en gradient. Du måste ställa in pointer-händelser till ingen för att säkerställa att elementet inte är valbart.
Här är resultatet:
Denna teknik uppnådde samma resultat som den föregående (plus oskärpa i slutet). Men du får mer flexibilitet att använda andra typer av layouter och design.
Lägga till en dynamisk expandera och komprimera knapp
Att lägga till en expandera/komprimera-knapp gör korten mer realistiska och interaktiva. Med det här mönstret utökar du innehållet genom att klicka på Bygga ut knappen, varefter texten ändras till Kollaps. Så knappens text växlar mellan "Expandera" och "Komprimera" när du klickar på den. Dessutom visas och döljs resten av innehållet i varje respektive tillstånd.
Du har redan definierat en inmatning element i din HTML. Detta element kommer att fungera som din knapp. För att formatera denna inmatning till en knapp, inkludera följande CSS i din stilmall:
.expand-btn {
utseende: ingen;
gräns: 1pxfastsvart;
stoppning: .5em;
gräns-radie: .25em;
markören: pekare;
marginal-top: 1rem;
}När du håller muspekaren på knappen vill du ändra bakgrundsfärgen:
.expand-btn:sväva {
bakgrundsfärg: #ccc;
}Nu CSS för att byta text när inmatningen är markerad:
.expand-btn::innan {
innehåll: "Bygga ut"
}
.expand-btn:kontrollerade::innan {
innehåll: "Kollaps"
}
När du nu klickar på knappen/inmatningen går texten från Bygga ut till Kollaps. Men själva innehållet kommer inte att utökas ännu. För att få det att göra det när du klickar på knappen, lägg till följande CSS:
.cuttoff-text:har(+.expand-btn:kontrollerade) {
höjd: bil;
}Det här exemplet använder has() CSS-väljare för att rikta in elementet. Med den här koden säger du att om det avskurna textområdet har en markerad expanderingsknapp ska höjden på kortet vara bil (vilket utökar det).
Här är resultatet:
Andra CSS-tips och tricks att lära sig
Den här artikeln visade två olika metoder för att begränsa antalet rader i en ruta med CSS. Vi har till och med lagt till en knapp för att expandera/komprimera innehållet utan att skriva en enda rad JavaScript.
Men det finns massor av andra tips och tricks i CSS. Dessa tips ger dig ett kreativt sätt att uppnå dina önskade layouter utan att skada prestanda, läsbarhet eller tillgänglighet.
