Šajā rakstā tiks sniegta procedūra teksta nostiprināšanai aizmugurējā vējā.
Kā saspiest tekstu līdz noteiktam rindu skaitam?
Līniju nostiprināšanas klase programmā Tailwind ierobežo teksta saturu blokā līdz noteiktam rindu skaitam. To darot, teksta bloks paslēps tekstu pēc klasē norādītā rindu skaita. To var izmantot tīmekļa lapā, lai parādītu lietotājam, ka ir kāda teksta informācija, vai paslēptu visu nevajadzīgo tekstu, lai izvairītos no tīmekļa lapas piesātinājuma.
Sintakse
Zemāk dotā sintakse ir sniegta sadaļā ' klasē ” elementa atribūts, lai izmantotu līnijas iespīlēšanu:
Iepriekš definētajā sintaksē lietotājs var izmantot ciparus no “ 1 līdz 6 ”, lai izmantotu noklusējuma līnijas nostiprināšanas klases. Piemēram, “ līnijas skava-1 ” klase neļaus teksta saturam pārsniegt vienu rindiņu.
Izpratīsim “līnijas nometnes” klases jēdzienu, izmantojot dažus piemērus.
1. piemērs: izmantojiet līniju skavām, lai ierobežotu saturu līdz noteiktam rindu skaitam
Ierobežosim teksta saturu līdz trim rindiņām, izmantojot Tailwind līniju nostiprināšanas klasi, kā tas izdarīts tālāk:
< div klasē = ' noapaļots-lg flex justify-center bg-slate-200 m-5 p-4' >
< lpp klasē = 'line-clamp-3 w-72' > Šis ir rindkopas paraugs. Tas būs redzams tikai 3 rindiņas. Viss saturs pēc tā tiks paslēpts. Tas ir saistīts ar līnijas nostiprināšanas klasi Tailwind. < / lpp >
< / div >
Iepriekš minētā koda skaidrojums ir šāds:
- A ' div ” elements ir izveidots ar noapaļotiem stūriem, izmantojot noapaļots-lg ” klase. Tas nodrošina piemali un polsterējumu, izmantojot ' m-{number} '&' p-{number} ' klases.
- Pēc tam elements div elementā tiek centrēts, izmantojot ' attaisnot-centrs 'klase un ' flex ” klase izveido konteineru, kurā būs div bērnelements.
- ' bg-{color}-{number} ” klase nosaka div elementa fona krāsu.
- A ' ” ir izveidots tags, kas satur teksta saturu. Tas tiek nodrošināts fiksēts platums, izmantojot ' w-{number} ” klase.
- Visbeidzot, teksta saturs ' lpp ' elements ir ierobežots līdz trim rindām, izmantojot ' līnijas skava-3 ” klase.
Izvade
Izvadē var redzēt, ka teksta saturs, kas pārsniedza norādīto trīs rindiņu robežu, ir paslēpts:
2. piemērs: izmantojiet līnijas skavas klasi ar noklusējuma stāvokļiem aizmugurējā vējā
Tailwind nodrošina dažādus noklusējuma stāvokļus elementam, ko var izmantot, lai padarītu dizaina izkārtojumus dinamiskākus. Izstrādātājs var izmantot jebkuru Tailwind klasi ar šiem stāvokļiem, lai elementam nodrošinātu norādīto dizaina rekvizītu, kad vien šis stāvoklis tiek sasniegts. Līdzīgi, ar šiem noklusējuma Tailwind stāvokļiem var izmantot arī klasi “līnijas skava”.
Sintakse klases “line-clamp” izmantošanai ar stāvokli Tailwind ir norādīta tālāk:
{ Valsts } : līnijas skava- { numuru }Ir trīs noklusējuma stāvokļi, kas aprakstīti šādi:
- virzīt kursoru: Tas ir elementa stāvoklis, kad lietotājs novieto peles kursoru virs tā.
- fokuss: Tas ir stāvoklis, kad elements ir fokusā. Piemēram, lietotājs pāriet uz elementu, nospiežot taustiņu “tab”.
- aktīvs: Stāvoklis, kad lietotājs ir aktivizējis elementu.
Zemāk redzamajā demonstrācijā viss ir identisks iepriekšējam piemēram. Vienīgā atšķirība ir tā, ka līnijas nostiprināšanas klase ir nodrošināta ar ' novietojiet kursoru ' Valsts:
< div klasē = ' noapaļots-lg flex justify-center bg-slate-200 m-5 p-4' >< lpp klasē = 'hover:line-clamp-3 w-72' > Šis ir rindkopas paraugs. Tas būs redzams tikai 3 rindiņas. Viss saturs pēc tā tiks paslēpts. Tas ir saistīts ar Tailwind linu iespīlēšanas klasi. < / lpp >
< / div >
Ņemiet vērā, ka “ ” klasi nodrošina “ kursors: līnija-skava-3 ” klasē, kas ierobežos teksta saturu līdz trim rindiņām ikreiz, kad lietotājs novieto peles kursoru virs satura lodziņa.
Izvade
Tālāk redzamajā izvadā var redzēt, ka līnijas nostiprināšanas īpašība tiek lietota, kad peles kursors atrodas virs bloka:
3. piemērs: izmantojiet līniju skavas klasi ar pārtraukuma punktiem
Pārtraukuma punkti ir multivides vaicājumi programmā Tailwind, kas palīdz lietotājiem izveidot adaptīvu dizaina izkārtojumu. Tailwind nodrošina piecus noklusējuma pārtraukuma punktus ar iepriekš noteiktu minimālo platumu. Ar šiem pārtraukuma punktiem izstrādātājs var izmantot arī līniju nostiprināšanas klasi.
Sintakse līnijas nostiprināšanas klases lietošanai ar pārtraukuma punktiem ir šāda:
{ pārtraukuma punktu prefiksi } : līnijas skava- { numuru }Iepriekš minētajā sintaksē minētie “pārtraukuma punktu prefiksi” ir šādi:
- sm: Šī pārtraukuma punkta minimālais platums ir 640 pikseļi.
- md: Šī pārtraukuma punkta minimālais platums ir 768 pikseļi.
- lg: Šī pārtraukuma punkta minimālais platums ir 1024 pikseļi.
- xl: Šī pārtraukuma punkta minimālais platums ir 1280 pikseļi.
- 2xl: Šī pārtraukuma punkta minimālais platums ir 1536 pikseļi.
Tālāk sniegtajā demonstrācijā “ lpp ” elements ir nodrošināts ar dažādām līnijas skavām uz dažādiem pārtraukuma punktiem. Tas mainīs teksta bloka rindiņas iespīlēšanas īpašību ikreiz, kad tiks sasniegts jaunais pārtraukuma punkts:
< div klasē = ' noapaļots-lg flex justify-center bg-slate-200 m-5 p-4' >< lpp klasē = ' līnijas skava-1 lg:line-clamp-3 md:line-clamp-2 sm:line-clamp-1 w-72' > Šis ir rindkopas paraugs. Tas būs redzams tikai 3 rindiņas. Viss saturs pēc tā tiks paslēpts. Tas ir saistīts ar Tailwind linu iespīlēšanas klasi. < / lpp >
< / div >
P elements pēc noklusējuma tiek nodrošināts ar “line-clamp-1” klasi. Tomēr teksta saturs elementā “p” tiks ierobežots līdz vienai rindiņai. sm ' pārtraukuma punkts, divas rindiņas ' md ' pārtraukuma punkts un trīs rindas ' lg ” pārtraukuma punkts.
Izvade
No izvades ir skaidrs, ka teksta bloka line-clamp īpašība mainās, mainoties ekrāna izmēram:
Mēs esam demonstrējuši procedūru, lai tekstu iespīlētu noteiktā rindu skaitā programmā Tailwind.
Secinājums
Līniju skavas klase programmā Tailwind ierobežo elementa teksta saturu līdz norādītajam rindu skaitam. Klase “lin-clamp-{number}” tiek izmantota kā sintakse teksta nostiprināšanai ierobežotās rindās. Līnijas skavas klasi var izmantot ar iepriekš definētiem pārtraukuma punktiem un stāvokļa variantiem programmā Tailwind. Šajā rakstā ir sniegta procedūra teksta nostiprināšanai noteiktā rindu skaitā.