Osvojte si praktickú techniku CSS, ktorú môžete použiť na skrytie obsahu a jeho odhalenie na požiadanie.
Obmedzenie množstva textu v prvku je bežnou požiadavkou webového dizajnu. Často uvidíte článok s troj- alebo štvorriadkovým úryvkom s tlačidlom, ktoré vám umožní rozšíriť celý text.
Tento dizajn môžete vytvoriť pomocou kombinácie CSS a JavaScriptu. Môžete to však urobiť aj pomocou samotného CSS. Objavte dva spôsoby obmedzenia textu v poli a ako môžete vytvoriť tlačidlo dynamického rozbalenia iba pomocou CSS.
Technika Webkit
Vytvorte prázdny priečinok a upravte v ňom dva súbory: index.html a style.css. Vnútri index.html vytvorte HTML kostru:
html>
<htmllang="sk"><hlavu>
<titul>Dokumenttitul>
<odkazrel="štýlov"href="style.css">
hlavu><telo>
telo>
html>
Odkaz v oddielu, do style.css súbor, zaisťuje, že všetky CSS, ktoré pridáte do tohto súboru, sa budú vzťahovať na túto stránku. Potom prilepte nasledujúce označenie HTML do značky v index.html:
<oddieletrieda="skupina kariet">
<článoktrieda="karta">
<h2>článok 1h2><ptrieda="text odrezania">
Tu je 300-slovný text
p><vstuptypu="zaškrtávacie políčko"trieda="expand-btn">
článok><článoktrieda="karta">
<h2>článok 2h2><ptrieda="text odrezania">
Tu je 200-slovný text
p><vstuptypu="zaškrtávacie políčko"trieda="expand-btn">
článok><článoktrieda="karta">
<h2>článok 1h2><ptrieda="text odrezania">
Tu je 100-slovný text
p>
<vstuptypu="zaškrtávacie políčko"trieda="expand-btn">
článok>
oddiele>
Štruktúra tohto HTML je jednoduchá, no stále sa používa sémantické označenie pre prístupnosť. Element sekcie obsahuje tri elementy článku. Každý článok obsahuje nadpis, odsek a vstupný prvok. Na úpravu každej sekcie článku do karty použijete CSS.
Vaša stránka bude medzitým vyzerať takto:
Na obrázku vyššie môžete vidieť rôzne dĺžky textu v každom odseku. 300 slov v prvom, 200 slov v druhom a 100 v treťom.
Ďalším krokom je začať so štýlom stránky pridaním CSS do style.css súbor. Začnite obnovením orámovania dokumentu a zadaním bielej farby pozadia:
*, *::predtým, *::po {
box-size: border-box;
}
telo {
pozadie: #f3f3f3;
pretečeniu: skryté;
}
Ďalej premeňte prvok s triedou card-group na mriežkový kontajner s tromi stĺpcami. Každá sekcia článku zaberá stĺpec:
.kartová-skupina {
displej: mriežka;
mriežka-šablóna-stĺpce: opakovať(3, 1fr);
medzera: .5rem;
align-items: flexibilný štart;
}Upravte štýl každej časti článku ako kartu s bielou farbou pozadia a čiernym, mierne okrúhlym okrajom:
.karta {
pozadie: biely;
vypchávka: 1rem;
hranica: 1pxpevnýčierna;
hraničný polomer: 0,25 em;
}Nakoniec pridajte nejaké okraje:
h2, p {
marža: 0;
}
h2 {
okraj-dole: 1rem;
}
Uložte súbor a skontrolujte svoj prehliadač. Stránka by mala vyzerať ako na obrázku nižšie:
Ďalším krokom je zníženie počtu riadkov pre každý text na 3. Tu je CSS na to:
.cuttoff-text {
--max-lines: 3;
pretečeniu: skryté;
displej: -webkit-box;
-webkit-box-orient: vertikálne;
-webkit-line-clamp: var(--max-lines);
}
Začnite nastavením premenná CSS, max-lines, to 3 a skrytie pretekajúceho obsahu. Potom nastavte displej na -webkit-box a upnite linku na 3.
Nasledujúci obrázok ukazuje výsledok. Každá karta zobrazuje v treťom riadku textu elipsu:
Stiahnutie tejto techniky môže byť dosť zložité. Ak by ste vynechali akúkoľvek vlastnosť, všetko sa pokazí. Ďalšou nevýhodou je, že nemôžete použiť inú vlastnosť zobrazenia ako --webkit-box. Môžete napríklad chcieť použite Grid alebo Flexbox. Z týchto dôvodov je lepšia nasledujúca technika.
Flexibilnejší prístup k obmedzeniu počtu riadkov v texte
Táto technika vám umožňuje robiť to isté ako prístup webkitu s rovnakými výsledkami. Ale veľký rozdiel je v tom, že máte veľa flexibility, pretože výšku si nastavujete sami. Navyše môžete použiť akúkoľvek vlastnosť zobrazenia alebo akúkoľvek možnosť štýlu, ktorú uprednostňujete.
Ak chcete začať, nahraďte blok CSS za .cutoff-text s tým:
.cuttoff-text {
--max-lines: 5;
--výška riadku: 1.4;
výška: calc(var(--max-lines) * 1em * var(--výška riadku));
line-height: var(--výška riadku);
pozíciu: príbuzný;
}Nastavenie výšky čiary je dôležité, pretože ju musíte brať do úvahy pri určovaní vašej výšky. Ak chcete získať výšku, vynásobte výšku riadku veľkosťou písma a počtom riadkov.
Pridávame poloha: relatívna vlastnosť, pretože ju potrebujeme na pridanie efektu slabnutia. Na dokončenie efektu pridajte nasledujúci CSS:
.cuttoff-text::predtým {
obsahu: "";
pozíciu: absolútne;
výška: calc(2em * var(--výška riadku));
šírka: 100%;
dno: 0;
ukazovateľ-udalosti: žiadny;
pozadie: lineárny gradient(dodno, transparentný, biely);
}Vyššie uvedený CSS rozmaže posledný riadok textu na každej karte. Efekt vyblednutia môžete dosiahnuť pomocou pozadie vlastnosť a gradient. Musíte nastaviť ukazovateľ-udalosti do žiadny aby ste sa uistili, že prvok nie je voliteľný.
Tu je výsledok:
Táto technika dosiahla rovnaký výsledok ako predchádzajúca (plus rozmazanie na konci). Získate však väčšiu flexibilitu pri používaní iných druhov rozložení a dizajnov.
Pridanie tlačidla dynamického rozbalenia a zbalenia
Pridaním tlačidla na rozbalenie/zbalenie sú karty realistickejšie a interaktívnejšie. Pomocou tohto vzoru rozbalíte obsah kliknutím na Rozbaliť tlačidlo, po ktorom sa text zmení na kolaps. Takže pri kliknutí sa text tlačidla prepína medzi možnosťami „Rozbaliť“ a „Zbaliť“. Okrem toho sa zvyšok obsahu zobrazuje a skrýva v každom príslušnom stave.
Už ste definovali vstup prvok vo vašom HTML. Tento prvok bude slúžiť ako vaše tlačidlo. Ak chcete upraviť tento vstup do tlačidla, zahrňte do svojej šablóny štýlov nasledujúci CSS:
.expand-btn {
vzhľad: žiadny;
hranica: 1pxpevnýčierna;
vypchávka: 0,5 em;
hraničný polomer: 0,25 em;
kurzor: ukazovateľ;
margin-top: 1rem;
}Keď umiestnite kurzor myši na tlačidlo, chcete zmeniť farbu pozadia:
.expand-btn:vznášať sa {
farba pozadia: #ccc;
}Teraz CSS na prepínanie textu pri kontrole vstupu:
.expand-btn::predtým {
obsahu: "Rozbaliť"
}
.expand-btn:skontrolované::predtým {
obsahu: "kolaps"
}
Teraz, keď kliknete na tlačidlo/vstup, text prejde z Rozbaliť do kolaps. Samotný obsah sa ale zatiaľ rozširovať nebude. Ak to chcete urobiť, keď kliknete na tlačidlo, pridajte nasledujúci CSS:
.cuttoff-text:má(+.expand-btn:skontrolované) {
výška: auto;
}Tento príklad používa has() Selektor CSS na zacielenie na prvok. Týmto kódom hovoríte, že ak má oblasť s orezaným textom začiarknuté tlačidlo rozbalenia, výška karty by mala byť auto (čo ju rozširuje).
Tu je výsledok:
Ďalšie tipy a triky CSS, ktoré sa treba naučiť
Tento článok demonštroval dve rôzne metódy na obmedzenie počtu riadkov v rámčeku pomocou CSS. Dokonca sme pridali tlačidlo na rozbalenie/zbalenie obsahu bez napísania jediného riadku JavaScriptu.
V CSS je však veľa ďalších tipov a trikov. Tieto tipy vám ponúkajú kreatívny spôsob, ako dosiahnuť požadované rozloženia bez zníženia výkonu, čitateľnosti alebo dostupnosti.