Kā ierobežot teksta rindiņas tikai ar CSS

Teksta daudzuma ierobežošana elementā ir izplatīta tīmekļa dizaina prasība. Jūs bieži redzēsit rakstu ar trīs vai četru rindiņu fragmentu ar pogu, kas ļauj izvērst pilnu tekstu.

Šo dizainu var izveidot, izmantojot CSS un JavaScript kombināciju. Taču to var izdarīt arī, izmantojot tikai CSS. Atklājiet divus veidus, kā ierobežot tekstu lodziņā un kā izveidot dinamisku izvēršanas pogu, izmantojot tikai CSS.

Webkit tehnika

Izveidojiet tukšu mapi un rediģējiet tajā divus failus: index.html un stils.css. Iekšpusē index.html failu, izveidojiet HTML skeletu:

html>
<htmllang="lv">
<galvu>
<virsraksts>Dokumentsvirsraksts>
<saiterel="stila lapa"href="stils.css">
galvu>
<ķermeni>
ķermeni>
html>

Saite sadaļā sadaļu, uz stils.css failu, nodrošina, ka visi CSS, ko pievienojat šim failam, attieksies uz šo lapu. Pēc tam ielīmējiet tālāk norādīto HTML marķējumu atzīmes iekšā index.html:

<sadaļāklasē="karšu grupa">





instagram viewer


<rakstuklasē="karte">
<h2>1. pantsh2>
<lppklasē="nogrieztais teksts">
 Šeit ir 300 vārdu teksts
lpp>
<ievadeveids="izvēles rūtiņa"klasē="paplašināt-btn">
rakstu>
<rakstuklasē="karte">
<h2>2. pantsh2>
<lppklasē="nogrieztais teksts">
 Šeit ir 200 vārdu teksts
lpp>
<ievadeveids="izvēles rūtiņa"klasē="paplašināt-btn">
rakstu>
<rakstuklasē="karte">
<h2>1. pantsh2>
<lppklasē="nogrieztais teksts">
 Šeit ir 100 vārdu teksts
lpp>
<ievadeveids="izvēles rūtiņa"klasē="paplašināt-btn">
rakstu>
sadaļā>

Šī HTML struktūra ir vienkārša, taču tā joprojām tiek izmantota semantiskais marķējums pieejamībai. Sadaļas elementā ir trīs raksta elementi. Katrs raksts sastāv no virsraksta, rindkopas un ievades elementa. Jūs izmantosiet CSS, lai katru raksta sadaļu veidotu kartītē.

Tikmēr jūsu lapa izskatīsies šādi:

Iepriekš redzamajā attēlā var redzēt dažāda garuma tekstu katrā rindkopā. 300 vārdi pirmajā, 200 vārdi otrajā un 100 trešajā.

Nākamais solis ir sākt veidot lapu, pievienojot CSS stils.css failu. Sāciet, atiestatot dokumenta apmali un piešķirot pamattekstam baltu fona krāsu:

*, *::pirms, *::pēc {
kastes izmēra noteikšana: apmale-box;
}
ķermeni {
fons: #f3f3f3;
pārplūde: paslēptas;
}

Pēc tam elementu ar karšu grupas klasi pārvērtiet režģa konteinerā ar trim kolonnām. Katra raksta sadaļa aizņem kolonnu:

.card-group {
displejs: režģis;
režģis-veidne-kolonnas: atkārtojiet(3, 1fr);
plaisa: .5rem;
izlīdzināt vienumus: flex-start;
}

Veidojiet katru raksta sadaļu kā kartīti ar baltu fona krāsu un melnu, nedaudz apaļu apmali:

.karte {
fons: balts;
polsterējums: 1rem;
robeža: 1pxcietsmelns;
robeža-rādiuss: .25em;
}

Visbeidzot pievienojiet dažas piemales:

h2, lpp {
starpība: 0;
}
h2 {
piemale-apakšā: 1rem;
}

Saglabājiet failu un pārbaudiet savu pārlūkprogrammu. Lapai vajadzētu izskatīties tā, kā parādīts zemāk esošajā attēlā:

Nākamais solis ir samazināt katra teksta rindu skaitu līdz 3. Šeit ir CSS:

.cuttoff-text {
--maksimālās līnijas: 3; 
pārplūde: paslēptas;

displejs: -tīmekļa komplekta kaste; 
-webkit-box-orient: vertikāli;
-Webkit-line-clamp: var(--maksimālās līnijas);
}

Sāciet ar iestatījumu CSS mainīgais, max-lines, līdz 3 un slēpj pārpildītu saturu. Pēc tam iestatiet displeju uz -tīmekļa komplekta kaste un piestipriniet līniju pie 3.

Nākamajā attēlā parādīts rezultāts. Katras kartītes trešajā teksta rindiņā ir attēlota elipsi:

Šo paņēmienu var būt diezgan sarežģīti izmantot. Ja jūs izlaidīsit kādu īpašumu, tad viss sabojāsies. Vēl viens trūkums ir tas, ka jūs nevarat izmantot citu displeja rekvizītu, izņemot --webkit-box. Piemēram, jūs varētu vēlēties izmantojiet Grid vai Flexbox. Šo iemeslu dēļ labāka ir šāda tehnika.

Elastīgāka pieeja teksta rindu skaita ierobežošanai

Šis paņēmiens ļauj veikt to pašu, ko tīmekļa komplekta pieeja, ar tādiem pašiem rezultātiem. Bet lielā atšķirība ir tā, ka jums ir daudz elastības, jo jūs pats iestatāt augstumu. Turklāt varat izmantot jebkuru displeja rekvizītu vai jebkuru stila opciju, kuru vēlaties.

Lai sāktu, nomainiet CSS bloku priekš .cutoff-text ar šo:

.cuttoff-text {
--maksimālās līnijas: 5;
-- līnijas augstums: 1.4;
augstums: aprēķins(var(--maksimālās līnijas) * 1em * var(-- līnijas augstums));
līnijas augstums: var(-- līnijas augstums);
pozīciju: radinieks;
}

Līnijas augstuma iestatīšana ir svarīga, jo jums tas jāņem vērā, nosakot savu augstumu. Lai iegūtu augstumu, rindas augstums jāreizina ar fonta lielumu un rindu skaitu.

Mēs pievienojam pozīcija: relatīvs īpašums, jo mums tas ir nepieciešams, lai pievienotu izbalēšanas efektu. Pievienojiet šādu CSS, lai pabeigtu efektu:

.cuttoff-text::pirms {
saturu: "";
pozīciju: absolūts;
augstums: aprēķins(2em * var(-- līnijas augstums));
platums: 100%;
apakšā: 0;
rādītājs-notikumi: neviens;
fons: lineārs-gradients(uzapakšā, caurspīdīgs, balts);
}

Iepriekš minētais CSS aizmiglo katras kartītes pēdējo teksta rindiņu. Jūs varat panākt izbalēšanas efektu, izmantojot fons īpašums un gradients. Jums ir jāiestata rādītājs-notikumi uz neviens lai nodrošinātu, ka elements nav atlasāms.

Lūk, rezultāts:

Šis paņēmiens sasniedza tādu pašu rezultātu kā iepriekšējā (plus izplūdums beigās). Taču jūs iegūstat lielāku elastību, izmantojot cita veida izkārtojumus un dizainus.

Dinamiskās izvēršanas un sakļautās pogas pievienošana

Pievienojot izvēršanas/sakukšanas pogu, kartītes kļūst reālistiskākas un interaktīvākas. Izmantojot šo modeli, varat izvērst saturu, noklikšķinot uz Izvērst pogu, pēc kuras teksts mainās uz Sakļaut. Tādējādi pogas teksts tiek pārslēgts starp "Izvērst" un "Sakļaut", noklikšķinot uz pogas. Turklāt pārējais saturs tiek parādīts un paslēpts katrā attiecīgajā stāvoklī.

Jūs jau esat definējis ievade elementu savā HTML. Šis elements kalpos kā jūsu poga. Lai šo ievadi veidotu pogā, stila lapā iekļaujiet šādu CSS:

.expand-btn {
izskats: neviens;
robeža: 1pxcietsmelns;
polsterējums: 0,5 em;
robeža-rādiuss: .25em;
kursors: rādītājs;
margin-top: 1rem;
}

Novietojot kursoru uz pogas, vēlaties mainīt fona krāsu:

.expand-btn:virziet kursoru {
fona krāsa: #ccc;
}

Tagad CSS teksta pārslēgšanai, kad ir pārbaudīta ievade:

.expand-btn::pirms {
saturu: "Izvērst"
}
.expand-btn:pārbaudīts::pirms {
saturu: "Sakļaut"
}

Tagad, noklikšķinot uz pogas/ievades, teksts tiek nosūtīts no Izvērst uz Sakļaut. Bet pats saturs vēl nepaplašināsies. Lai to izdarītu, noklikšķinot uz pogas, pievienojiet šādu CSS:

.cuttoff-text:has(+.expand-btn:pārbaudīts) {
augstums: auto;
}

Šajā piemērā tiek izmantots has() CSS atlasītājs, lai atlasītu elementu. Izmantojot šo kodu, jūs sakāt, ka, ja nogrieztajā teksta apgabalā ir atzīmēta izvēršanas poga, kartītes augstumam ir jābūt auto (kas to paplašina).

Lūk, rezultāts:

Citi CSS padomi un triki, kas jāapgūst

Šajā rakstā tika parādītas divas dažādas metodes rindu skaita ierobežošanai lodziņā, izmantojot CSS. Mēs pat pievienojām pogu satura izvēršanai/sakukšanai, neierakstot nevienu JavaScript rindiņu.

Bet CSS ir daudz citu padomu un triku. Šie padomi piedāvā radošu veidu, kā sasniegt vēlamos izkārtojumus, nekaitējot veiktspējai, lasāmībai vai pieejamībai.