Osvojte si praktickou techniku CSS, kterou můžete použít ke skrytí obsahu a jeho odhalení na vyžádání.
Omezení množství textu v prvku je běžným požadavkem webového designu. Často uvidíte článek s tří- nebo čtyřřádkovým úryvkem s tlačítkem, které vám umožní rozšířit celý text.
Tento design můžete vytvořit pomocí kombinace CSS a JavaScriptu. Ale můžete to udělat také pomocí samotného CSS. Objevte dva způsoby, jak omezit text v rámečku, a jak vytvořit tlačítko dynamického rozbalení pouze pomocí CSS.
Technika Webkit
Vytvořte prázdnou složku a upravte v ní dva soubory: index.html a styl.css. Uvnitř index.html vytvořte HTML kostru:
html>
<htmllang="en"><hlava>
<titul>Dokumenttitul>
<odkazrel="stylesheet"href="style.css">
hlava><tělo>
tělo>
html>
Odkaz v oddílu, do styl.css soubor, zajistí, že všechny CSS, které do tohoto souboru přidáte, budou platit pro tuto stránku. Dále vložte následující označení HTML do značky v index.html:
<sekcetřída="skupina karet">
<článektřída="Kartu">
<h2>Článek 1h2><ptřída="text oříznutí">
Zde je text o 300 slovech
p><vstuptyp="zaškrtávací políčko"třída="expand-btn">
článek><článektřída="Kartu">
<h2>článek 2h2><ptřída="text oříznutí">
Zde je text o 200 slovech
p><vstuptyp="zaškrtávací políčko"třída="expand-btn">
článek><článektřída="Kartu">
<h2>Článek 1h2><ptřída="text oříznutí">
Zde je text o 100 slovech
p>
<vstuptyp="zaškrtávací políčko"třída="expand-btn">
článek>
sekce>
Struktura tohoto HTML je jednoduchá, přesto se stále používá sémantické označení pro usnadnění. Prvek sekce obsahuje tři prvky článku. Každý článek obsahuje nadpis, odstavec a vstupní prvek. Ke stylování každé části článku do karty použijete CSS.
Vaše stránka bude mezitím vypadat takto:
Na obrázku výše můžete vidět různé délky textu v každém odstavci. 300 slov v prvním, 200 slov ve druhém a 100 ve třetím.
Dalším krokem je začít stylovat stránku přidáním CSS do styl.css soubor. Začněte resetováním okraje na dokumentu a dejte tělu bílou barvu pozadí:
*, *::před, *::po {
velikost krabice: border-box;
}
tělo {
Pozadí: #f3f3f3;
přetékat: skrytý;
}
Dále přeměňte prvek s třídou card-group na mřížkový kontejner se třemi sloupci. Každá sekce článku zabírá sloupec:
.karta-skupina {
Zobrazit: mřížka;
mřížka-šablona-sloupce: opakovat(3, 1fr);
mezera: .5rem;
zarovnat-položky: flex-start;
}Upravte styl každé části článku jako kartu s bílou barvou pozadí a černým, mírně kulatým okrajem:
.Kartu {
Pozadí: bílý;
vycpávka: 1rem;
okraj: 1pxpevnýČerná;
hraniční poloměr: 0,25 em;
}Nakonec přidejte nějaké okraje:
h2, p {
okraj: 0;
}
h2 {
okraj-dole: 1rem;
}
Uložte soubor a zkontrolujte svůj prohlížeč. Stránka by měla vypadat jako na obrázku níže:
Dalším krokem je snížit počet řádků pro každý text na 3. Tady je CSS na to:
.cuttoff-text {
--max-linek: 3;
přetékat: skrytý;
Zobrazit: -webkit-box;
-webkit-box-orient: vertikální;
-webkit-line-clamp: var(--max-linek);
}
Začněte nastavením CSS proměnná, max-lines, to 3 a skrytí přetékajícího obsahu. Poté nastavte displej na -webkit-box a upněte šňůru na 3.
Výsledek ukazuje následující obrázek. Každá karta zobrazuje na třetím řádku textu elipsu:
Tato technika může být docela složitá. Pokud byste vynechali nějakou vlastnost, všechno se zlomí. Další nevýhodou je, že nelze použít jinou vlastnost zobrazení než --webkit-box. Můžete například chtít použijte Grid nebo Flexbox. Z těchto důvodů je lepší následující technika.
Flexibilnější přístup k omezení počtu řádků v textu
Tato technika vám umožňuje dělat to samé jako přístup pomocí webkitu se stejnými výsledky. Ale velký rozdíl je v tom, že máte spoustu flexibility, protože si výšku nastavujete sami. Navíc můžete použít libovolnou vlastnost zobrazení nebo jakoukoli možnost stylu, kterou preferujete.
Chcete-li začít, nahraďte blok CSS za .cutoff-text s tím:
.cuttoff-text {
--max-linek: 5;
--výška řádku: 1.4;
výška: calc(var(--max-linek) * 1em * var(--výška řádku));
výška čáry: var(--výška řádku);
pozice: relativní;
}Nastavení výšky čáry je důležité, protože ji musíte vzít v úvahu při určování své výšky. Chcete-li získat výšku, vynásobte výšku řádku velikostí písma a počtem řádků.
Přidali jsme poloha: relativní vlastnost, protože ji potřebujeme k přidání efektu slábnutí. K dokončení efektu přidejte následující CSS:
.cuttoff-text::před {
obsah: "";
pozice: absolutní;
výška: calc(2em * var(--výška řádku));
šířka: 100%;
dno: 0;
ukazatele-události: žádný;
Pozadí: lineární gradient(nadno, průhledný, bílý);
}Výše uvedený CSS rozmaže poslední řádek textu na každé kartě. Efektu vyblednutí můžete dosáhnout pomocí Pozadí vlastnost a gradient. Musíte nastavit ukazatele-události na žádný aby bylo zajištěno, že prvek není volitelný.
Zde je výsledek:
Tato technika dosáhla stejného výsledku jako předchozí (plus rozostření na konci). Ale získáte větší flexibilitu při použití jiných druhů rozvržení a návrhů.
Přidání tlačítka dynamického rozbalení a sbalení
Přidáním tlačítka pro rozbalení/sbalení jsou karty realističtější a interaktivnější. S tímto vzorem rozbalíte obsah kliknutím na Rozšířit tlačítko, po jehož stisknutí se text změní na Kolaps. Text tlačítka se tedy při kliknutí přepíná mezi „Rozbalit“ a „Sbalit“. Kromě toho se zbytek obsahu zobrazí a skryje v každém příslušném stavu.
Již jste definovali vstup prvek ve vašem HTML. Tento prvek bude sloužit jako vaše tlačítko. Chcete-li upravit tento vstup do tlačítka, zahrňte do své šablony stylů následující CSS:
.expand-btn {
vzhled: žádný;
okraj: 1pxpevnýČerná;
vycpávka: 0,5 em;
hraniční poloměr: 0,25 em;
kurzor: ukazatel;
margin-top: 1rem;
}Když umístíte kurzor na tlačítko, chcete změnit barvu pozadí:
.expand-btn:vznášet se {
barva pozadí: #ccc;
}Nyní CSS pro přepínání textu při kontrole vstupu:
.expand-btn::před {
obsah: "Rozšířit"
}
.expand-btn:kontrolovány::před {
obsah: "Kolaps"
}
Nyní, když kliknete na tlačítko/vstup, text přejde z Rozšířit na Kolaps. Samotný obsah se ale zatím rozšiřovat nebude. Chcete-li to provést, když kliknete na tlačítko, přidejte následující CSS:
.cuttoff-text:má(+.expand-btn:kontrolovány) {
výška: auto;
}Tento příklad používá has() Selektor CSS pro zacílení na prvek. Tímto kódem říkáte, že pokud má oblast oříznutého textu zaškrtnuté tlačítko pro rozbalení, výška karty by měla být auto (což ji rozšiřuje).
Zde je výsledek:
Další CSS tipy a triky, které se můžete naučit
Tento článek demonstroval dvě různé metody pro omezení počtu řádků v rámečku pomocí CSS. Dokonce jsme přidali tlačítko pro rozbalení/sbalení obsahu bez psaní jediného řádku JavaScriptu.
V CSS je ale spousta dalších tipů a triků. Tyto tipy vám nabízejí kreativní způsob, jak dosáhnout požadovaných rozvržení, aniž byste snížili výkon, čitelnost nebo dostupnost.
