Használja ki a praktikus CSS-technikát, amellyel elrejtheti és igény szerint felfedheti a tartalmat.
Egy elemben lévő szöveg mennyiségének korlátozása általános webtervezési követelmény. Gyakran látni olyan cikket, amely három- vagy négysoros kivonattal rendelkezik egy gombbal, amely lehetővé teszi a teljes szöveg kibontását.
Ezt a tervet a CSS és a JavaScript kombinációjával hozhatja létre. De ezt egyedül CSS használatával is megteheti. Fedezze fel a dobozban lévő szöveg korlátozásának két módját, és azt, hogy hogyan hozhat létre dinamikus kibontási gombot pusztán CSS használatával.
A Webkit technika
Hozzon létre egy üres mappát, és szerkesszen benne két fájlt: index.html és stílus.css. Benne index.html fájl, hozzon létre egy HTML-vázat:
html>
<htmllang="en"><fej>
<cím>Dokumentumcím>
<linkrel="stíluslap"href="stílus.css">
fej><test>
test>
html>
Egy link a szakaszhoz, a stílus.css fájlt, biztosítja, hogy a fájlhoz hozzáadott minden CSS érvényes legyen erre az oldalra. Ezután illessze be a következő HTML-jelölést a címkék be index.html:
<szakaszosztály="kártya-csoport">
<cikkosztály="kártya">
<h2>1. cikkh2><posztály="kivágott szöveg">
300 szavas szöveg kerül ide
p><bemenettípus="jelölőnégyzet"osztály="expand-btn">
cikk><cikkosztály="kártya">
<h2>2. cikkh2><posztály="kivágott szöveg">
200 szavas szöveg kerül ide
p><bemenettípus="jelölőnégyzet"osztály="expand-btn">
cikk><cikkosztály="kártya">
<h2>1. cikkh2><posztály="kivágott szöveg">
100 szavas szöveg kerül ide
p>
<bemenettípus="jelölőnégyzet"osztály="expand-btn">
cikk>
szakasz>
Ennek a HTML-nek a szerkezete egyszerű, de továbbra is használatos szemantikai jelölés a hozzáférhetőség érdekében. Egy szakaszelem három cikkelemet tartalmaz. Minden cikk tartalmaz egy címsort, egy bekezdést és egy beviteli elemet. A CSS segítségével minden cikkszakaszt kártyává alakíthat.
Addig is az oldala így fog kinézni:
A fenti képen látható, hogy az egyes bekezdésekben változó hosszúságú szöveg található. 300 szó az elsőben, 200 szó a másodikban és 100 szó a harmadikban.
A következő lépés az oldal stílusának kialakítása a CSS hozzáadásával stílus.css fájlt. Kezdje a dokumentum szegélyének alaphelyzetbe állításával, és a törzsnek fehér háttérszínt adjon:
*, *::előtt, *::után {
doboz-méretezés: border-box;
}
test {
háttér: #f3f3f3;
túlcsordulás: rejtett;
}
Ezután alakítsa át a kártyacsoport osztályú elemet három oszlopos rácstárolóvá. Minden cikkszakasz egy oszlopot foglal el:
.kártya-csoport {
kijelző: rács;
rács-sablon-oszlopok: ismétlés(3, 1fr);
rés: .5rem;
align-ites: flex-start;
}Stílusozzon minden cikkrészletet kártyaként fehér háttérszínnel és fekete, enyhén kerek szegéllyel:
.kártya {
háttér: fehér;
párnázás: 1rem;
határ: 1pxszilárdfekete;
határ-sugár: .25em;
}Végül adjon hozzá néhány margót:
h2, p {
árrés: 0;
}
h2 {
margó-alsó: 1rem;
}
Mentse el a fájlt, és ellenőrizze a böngészőt. Az oldalnak úgy kell kinéznie, mint az alábbi képen:
A következő lépés az egyes szövegek sorainak 3-ra csökkentése. Íme a CSS ehhez:
.cuttoff-text {
--max-sorok: 3;
túlcsordulás: rejtett;
kijelző: -webkit-box;
-webkit-box-orient: függőleges;
-webkit-line-clamp: var(--max-sorok);
}
Kezdje a beállítással egy CSS-változó, max-lines, 3-ig és a túlcsorduló tartalom elrejtése. Ezután állítsa be a kijelzőt -webkit-box és rögzítse a vezetéket a 3-hoz.
Az alábbi képen látható az eredmény. Minden kártya egy ellipszist jelenít meg a harmadik szövegsorban:
Ezt a technikát meglehetősen trükkös lehet lehúzni. Ha bármilyen tulajdonságot kihagyna, akkor minden összeomlik. További hátránya, hogy nem használhat más megjelenítési tulajdonságot, mint --webkit-box. Például érdemes lehet Grid vagy Flexbox használata. Ezen okok miatt a következő technika jobb.
Rugalmasabb megközelítés a szövegben lévő sorok számának korlátozására
Ez a technika lehetővé teszi ugyanazt a dolgot, mint a webkit megközelítés, ugyanazokkal az eredménnyel. De a nagy különbség az, hogy rengeteg rugalmasság van, mivel te magad állítod be a magasságot. Ezenkívül bármilyen megjelenítési tulajdonságot vagy bármilyen stílusbeállítást használhat.
A kezdéshez cserélje ki a(z) CSS blokkot .cutoff-text ezzel:
.cuttoff-text {
--max-sorok: 5;
--vonal-magasság: 1.4;
magasság: kalc(var(--max-sorok) * 1em * var(--vonal-magasság));
vonalmagasság: var(--vonal-magasság);
pozíció: relatív;
}A vonalmagasság beállítása azért fontos, mert a magasság meghatározásakor ezt figyelembe kell venni. A magasság meghatározásához meg kell szorozni a sor magasságát a betűmérettel és a sorok számával.
Hozzátesszük pozíció: relatív tulajdonság, mert szükségünk van rá a fade hatás hozzáadásához. Adja hozzá a következő CSS-t a hatás befejezéséhez:
.cuttoff-text::előtt {
tartalom: "";
pozíció: abszolút;
magasság: kalc(2em * var(--vonal-magasság));
szélesség: 100%;
alsó: 0;
pointer-események: egyik sem;
háttér: lineáris-gradiens(nak nekalsó, átlátszó, fehér);
}A fenti CSS elhomályosítja az utolsó szövegsort az egyes kártyákon. Halványító hatást érhet el a háttér tulajdonság és gradiens. Be kell állítani pointer-események nak nek egyik sem hogy az elem ne legyen kiválasztható.
Íme az eredmény:
Ez a technika ugyanazt az eredményt érte el, mint az előző (plusz a végén elmosódottság). De nagyobb rugalmasságot kap más típusú elrendezések és tervek használatához.
Dinamikus kibontás és összecsukás gomb hozzáadása
A kibontás/összecsukás gomb hozzáadása valósághűbbé és interaktívabbá teszi a kártyákat. Ezzel a mintával bővítheti a tartalmat a gombra kattintva Kiterjed gombot, amely után a szöveg a következőre változik Összeomlás. Így a gomb szövege a „Kibontás” és az „Összecsukás” között vált, amikor rákattint. Ezenkívül a tartalom többi része minden megfelelő állapotban megjelenik és elrejti.
Már definiáltál egy bemenet elemet a HTML-ben. Ez az elem gombként fog szolgálni. Ha ezt a bevitelt gombpá szeretné stílusozni, adja meg a következő CSS-t a stíluslapjában:
.expand-btn {
kinézet: egyik sem;
határ: 1pxszilárdfekete;
párnázás: .5em;
határ-sugár: .25em;
kurzor: mutató;
margin-top: 1rem;
}Ha rámutat a gombra, meg szeretné változtatni a háttérszínt:
.expand-btn:lebeg {
háttérszín: #ccc;
}Most a CSS a szöveg váltásához, amikor a bevitelt ellenőrizzük:
.expand-btn::előtt {
tartalom: "Kiterjed"
}
.expand-btn:ellenőrizve::előtt {
tartalom: "Összeomlás"
}
Most, amikor rákattint a gombra/bevitelre, a szöveg innen indul Kiterjed nak nek Összeomlás. De maga a tartalom még nem bővül. Ha ezt meg szeretné tenni, amikor a gombra kattint, adja hozzá a következő CSS-t:
.cuttoff-text:has(+.expand-btn:checked) {
magasság: auto;
}Ez a példa a has() CSS-választó az elem célzásához. Ezzel a kóddal azt mondod, hogy ha a levágott szövegterületen van egy kijelölő kibontás gomb, akkor a kártya magassága auto (ami kibővíti).
Íme az eredmény:
Egyéb CSS-tippek és tanulnivalók
Ez a cikk két különböző módszert mutat be a dobozban lévő sorok számának korlátozására CSS használatával. Még egy gombot is hozzáadtunk a tartalom kibontásához/összecsukásához anélkül, hogy egy sor JavaScriptet is írnánk.
De rengeteg más tipp és trükk található a CSS-ben. Ezek a tippek kreatív módot kínálnak a kívánt elrendezések elérésére a teljesítmény, az olvashatóság vagy a hozzáférhetőség romlása nélkül.
