Kaip apriboti teksto eilutes tik naudojant CSS

Apriboti teksto kiekį elemente yra įprastas interneto dizaino reikalavimas. Dažnai pamatysite straipsnį su trijų ar keturių eilučių ištrauka su mygtuku, leidžiančiu išplėsti visą tekstą.

Šį dizainą galite sukurti naudodami CSS ir JavaScript derinį. Tačiau tai galite padaryti ir naudodami vien CSS. Atraskite du būdus, kaip apriboti tekstą laukelyje ir kaip galite sukurti dinaminį išplėtimo mygtuką naudodami tik CSS.

Webkit technika

Sukurkite tuščią aplanką ir jame redaguokite du failus: index.html ir stilius.css. Viduje index.html failą, sukurkite HTML skeletą:

html>
<htmllang="en">
<galva>
<titulą>dokumentastitulą>
<nuorodarel="stiliaus lapas"href="stilius.css">
galva>
<kūnas>
kūnas>
html>

Nuoroda į skyrių, į stilius.css failą, užtikrina, kad bet koks CSS, kurį pridėsite prie to failo, bus taikomas šiam puslapiui. Tada įklijuokite šį HTML žymėjimą į žymės index.html:

<skyriusklasė="kortelių grupė">





instagram viewer


<straipsnisklasė="kortelė">
<h2>1 straipsnish2>
<pklasė="atskirtas tekstas">
 Čia pateikiamas 300 žodžių tekstas
p>
<įvestistipo="žymimasis langelis"klasė="expand-btn">
straipsnis>
<straipsnisklasė="kortelė">
<h2>2 straipsnish2>
<pklasė="atskirtas tekstas">
 Čia pateikiamas 200 žodžių tekstas
p>
<įvestistipo="žymimasis langelis"klasė="expand-btn">
straipsnis>
<straipsnisklasė="kortelė">
<h2>1 straipsnish2>
<pklasė="atskirtas tekstas">
 Čia pateikiamas 100 žodžių tekstas
p>
<įvestistipo="žymimasis langelis"klasė="expand-btn">
straipsnis>
skyrius>

Šio HTML struktūra yra paprasta, tačiau ji vis dar naudojama semantinis žymėjimas prieinamumui užtikrinti. Skilties elementą sudaro trys straipsnio elementai. Kiekvieną straipsnį sudaro antraštė, pastraipa ir įvesties elementas. Naudosite CSS, kad sukurtumėte kiekvienos straipsnio dalies stilių į kortelę.

Tuo tarpu jūsų puslapis atrodys taip:

Aukščiau pateiktame paveikslėlyje galite matyti skirtingo ilgio tekstą kiekvienoje pastraipoje. 300 žodžių pirmame, 200 žodžių antrame ir 100 trečiame.

Kitas žingsnis – pradėti formuoti puslapį, prie jo pridedant CSS stilius.css failą. Pradėkite iš naujo nustatydami dokumento kraštinę ir suteikdami korpusui balto fono spalvą:

*, *::prieš, *::po {
dėžutės dydžio: kraštinė-dėžė;
}
kūnas {
fone: #f3f3f3;
perpildymas: paslėptas;
}

Tada paverskite elementą su kortelių grupės klase į tinklelio talpyklą su trimis stulpeliais. Kiekviena straipsnio dalis užima stulpelį:

.kortelių grupė {
ekranas: tinklelis;
tinklelis-šablonas-stulpeliai: kartoti(3, 1fr);
tarpas: .5rem;
išlyginti elementus: lankstus startas;
}

Stilizuokite kiekvieną straipsnio skiltį kaip kortelę su baltu fono spalva ir juodu, šiek tiek apvaliu krašteliu:

.kortelė {
fone: baltas;
kamšalas: 1rem;
siena: 1pxkietasjuodas;
pasienio spindulys: .25em;
}

Galiausiai pridėkite keletą paraščių:

h2, p {
marža: 0;
}
h2 {
paraštė-apačia: 1rem;
}

Išsaugokite failą ir patikrinkite savo naršyklę. Puslapis turėtų atrodyti taip, kaip parodyta paveikslėlyje žemiau:

Kitas žingsnis – sumažinti kiekvieno teksto eilučių skaičių iki 3. Štai tam skirtas CSS:

.nukirptas tekstas {
--max-lines: 3; 
perpildymas: paslėptas;

ekranas: -Webkit-box; 
-Webkit-box-orient: vertikaliai;
-Webkit-line-clamp: var(--max-lines);
}

Pradėkite nuo nustatymo CSS kintamasis, max-lines, iki 3 ir slepia perpildytą turinį. Tada nustatykite ekraną į -Webkit-box ir priveržkite liniją prie 3.

Toliau pateiktame paveikslėlyje parodytas rezultatas. Kiekvienos kortelės trečioje teksto eilutėje rodoma elipsė:

Šią techniką ištraukti gali būti gana sudėtinga. Jei praleistumėte kokį nors turtą, viskas suges. Kitas trūkumas yra tai, kad negalite naudoti kitokios rodymo ypatybės, išskyrus --webkit-box. Pavyzdžiui, galbūt norėsite naudokite Grid arba Flexbox. Dėl šių priežasčių ši technika yra geresnė.

Lankstesnis būdas apriboti teksto eilučių skaičių

Ši technika leidžia daryti tą patį, ką ir naudojant žiniatinklio rinkinį, ir pasiekti tuos pačius rezultatus. Tačiau didelis skirtumas yra tas, kad jūs turite daug lankstumo, nes patys nustatote aukštį. Be to, galite naudoti bet kurią rodymo ypatybę arba bet kurią pageidaujamą stiliaus parinktį.

Norėdami pradėti, pakeiskite CSS bloką .cutoff-text su šiuo:

.nukirptas tekstas {
--max-lines: 5;
--linijos aukštis: 1.4;
aukščio: skaičiuok(var(--max-lines) * 1em * var(--linijos aukštis));
linijos aukštis: var(--linijos aukštis);
padėtis: giminaitis;
}

Linijos aukščio nustatymas yra svarbus, nes nustatydami savo aukštį turite į jį atsižvelgti. Norėdami gauti aukštį, padauginkite eilutės aukštį iš šrifto dydžio ir eilučių skaičiaus.

Pridedame padėtis: santykinė savybė, nes mums jos reikia, kad pridėtume blukimo efektą. Pridėkite šį CSS, kad užbaigtumėte efektą:

.nukirptas tekstas::prieš {
turinys: "";
padėtis: absoliutus;
aukščio: skaičiuok(2em * var(--linijos aukštis));
plotis: 100%;
apačioje: 0;
rodyklės įvykiai: nė vienas;
fone: tiesinis-gradientas(įapačioje, skaidrus, baltas);
}

Aukščiau pateiktas CSS sulieja paskutinę kiekvienos kortelės teksto eilutę. Išblukimo efektą galite pasiekti naudodami fone savybė ir gradientas. Turite nustatyti rodyklės įvykiai į nė vienas užtikrinti, kad elemento nebūtų galima pasirinkti.

Štai rezultatas:

Šia technika buvo pasiektas toks pat rezultatas kaip ir ankstesnis (bei suliejimas pabaigoje). Bet jūs gaunate daugiau lankstumo, kai naudojate kitų tipų maketus ir dizainą.

Dinaminio išplėtimo ir sutraukimo mygtuko pridėjimas

Pridėjus išplėtimo / sutraukimo mygtuką, kortelės tampa tikroviškesnės ir interaktyvesnės. Naudodami šį šabloną galite išplėsti turinį spustelėdami Išskleisti mygtuką, po kurio tekstas pasikeičia į Sutraukti. Taigi spustelėjus mygtuko tekstas persijungia iš „Išskleisti“ į „Sutraukti“. Be to, likęs turinys rodomas ir slepiamas kiekvienoje atitinkamoje būsenoje.

Jūs jau apibrėžėte įvestis elementą savo HTML. Šis elementas bus jūsų mygtukas. Jei norite sukurti šio įvesties stilių į mygtuką, į savo stiliaus lapą įtraukite šį CSS:

.expand-btn {
išvaizda: nė vienas;
siena: 1pxkietasjuodas;
kamšalas: .5 em;
pasienio spindulys: .25em;
žymeklį: rodyklė;
paraštė-viršus: 1rem;
}

Užvedę pelės žymeklį ant mygtuko, norite pakeisti fono spalvą:

.expand-btn:užveskite pelės žymeklį {
fono spalva: #ccc;
}

Dabar CSS, skirtas pakeisti tekstą, kai patikrinama įvestis:

.expand-btn::prieš {
turinys: "Išskleisti"
}
.expand-btn: patikrinta::prieš {
turinys: "Sutraukti"
}

Dabar, kai spustelėsite mygtuką / įvestį, tekstas eina iš Išskleisti į Sutraukti. Bet pats turinys kol kas neišsiplės. Kad tai padarytumėte spustelėję mygtuką, pridėkite šį CSS:

.nukirptas tekstas:has(+.expand-btn:patikrinta) {
aukščio: automatinis;
}

Šiame pavyzdyje naudojamas has() CSS parinkiklis, skirtas taikyti pagal elementą. Naudodami šį kodą sakote, kad jei nukirptoje teksto srityje yra pažymėtas išplėtimo mygtukas, kortelės aukštis turėtų būti automatinis (tai jį išplečia).

Štai rezultatas:

Kiti CSS patarimai ir gudrybės, kurių reikia išmokti

Šiame straipsnyje buvo parodyti du skirtingi būdai, kaip apriboti eilučių skaičių langelyje naudojant CSS. Netgi pridėjome mygtuką, skirtą išplėsti / sutraukti turinį, neįrašant nė vienos JavaScript eilutės.

Tačiau CSS yra daugybė kitų patarimų ir gudrybių. Šie patarimai siūlo kūrybišką būdą pasiekti norimus išdėstymus nepakenkiant našumui, skaitomumui ar pasiekiamumui.