Paano I-clamp ang Teksto sa isang Tukoy na Bilang ng mga Linya sa Tailwind

Ibibigay ng artikulong ito ang pamamaraan para sa pag-clamping ng teksto sa isang Tailwind.

Paano I-clamp ang Teksto sa isang Tiyak na Bilang ng mga Linya?

Nililimitahan ng klase ng line-clamping sa Tailwind ang nilalaman ng text sa isang block sa isang partikular na bilang ng mga linya. Sa paggawa nito, itatago ng text block ang teksto pagkatapos ng bilang ng mga linyang tinukoy sa klase. Maaari itong magamit sa isang webpage upang ipakita sa gumagamit na mayroong ilang impormasyon sa teksto o upang itago ang lahat ng hindi kinakailangang teksto upang maiwasan ang saturation sa webpage.

Syntax

Ang ibinigay na syntax sa ibaba ay ibinigay sa ' klase ” attribute ng isang elemento para ilapat ang line clamping:

Sa natukoy na syntax sa itaas, magagamit ng user ang mga numero mula sa “ 1 hanggang 6 ” para sa paggamit ng mga default na line-clamping classes. Halimbawa, ang ' line-clamp-1 Hindi hahayaan ng klase ang nilalaman ng teksto na lumampas sa isang linya.

Unawain natin ang konsepto ng 'line-camp' na klase sa pamamagitan ng ilang halimbawa.

Halimbawa 1: Gamitin ang Line Clamp Class upang Limitahan ang Nilalaman sa isang Tukoy na Bilang ng mga Linya

Limitahan natin ang nilalaman ng teksto sa tatlong linya gamit ang line-clamping class sa Tailwind gaya ng ginawa sa ibaba:

Ang paliwanag ng code sa itaas ay ang mga sumusunod:

• isang ' div 'Ang elemento ay nilikha gamit ang mga bilugan na sulok gamit ang ' bilugan-lg ” klase. Nagbibigay ito ng margin at padding gamit ang ' m-{number} '&' p-{number} ” mga klase.
• Susunod, ang elemento sa div element ay nakasentro gamit ang “ justify-center 'klase, at ang' baluktot Lumilikha ang klase ng isang lalagyan na maglalaman ng child element ng div.
• Ang ' bg-{color}-{number} Ang klase ay nagtatakda ng kulay ng background ng elemento ng div.
• isang '

  Ang tag na ” ay nilikha na naglalaman ng nilalaman ng teksto. Ito ay binibigyan ng nakapirming lapad gamit ang ' w-{number} ” klase.

• Panghuli, ang nilalaman ng teksto ng ' p 'Ang elemento ay limitado sa tatlong linya gamit ang ' line-clamp-3 ” klase.

Output

Makikita sa output na ang nilalaman ng teksto na lumampas sa tinukoy na limitasyon ng tatlong linya ay nakatago:

Halimbawa 2: Gamitin ang Line Clamp Class na May Default na Estado sa Tailwind

Nagbibigay ang Tailwind ng iba't ibang default na estado para sa isang elemento na maaaring magamit upang gawing mas dynamic ang mga layout ng disenyo. Maaaring gumamit ang developer ng anumang klase ng Tailwind sa mga estadong ito upang ibigay ang tinukoy na katangian ng disenyo sa elemento sa tuwing makakamit ang estadong iyon. Katulad nito, ang klase ng 'line-clamp' ay maaari ding gamitin sa mga default na estado ng Tailwind na ito.

Ang syntax para sa paggamit ng klase ng 'line-clamp' na may estado sa Tailwind ay ibinigay sa ibaba:

May tatlong default na estado na inilalarawan bilang sumusunod:

• hover: Ito ay ang estado ng isang elemento kapag ini-hover ng user ang cursor ng mouse sa ibabaw nito.
• focus: Ito ay ang estado kapag ang elemento ay nasa pokus. Halimbawa, nag-navigate ang user sa elemento sa pamamagitan ng pagpindot sa 'tab' key.
• aktibo: Ang estado kapag ang elemento ay na-activate ng user.

Sa demonstrasyon sa ibaba, ang lahat ay magkapareho sa nakaraang halimbawa. Ang pagkakaiba lang ay ang line-clamping class ay ibinibigay sa ' hover ” estado:

Tandaan na ang '

'Ang klase ay ibinibigay ng ' hover:line-clamp-3 ” class, na maglilimita sa nilalaman ng teksto sa tatlong linya sa tuwing i-hover ng user ang cursor ng mouse sa kahon ng nilalaman.

Output

Makikita sa output sa ibaba na ang line clamping property ay inilalapat kapag ang mouse cursor ay nag-hover sa ibabaw ng block:

Halimbawa 3: Gamitin ang Line Clamp Class na May Mga Breakpoint

Ang mga breakpoint ay mga media query sa Tailwind na tumutulong sa mga user na gumawa ng tumutugon na layout ng disenyo. Nagbibigay ang Tailwind ng limang default na breakpoint na may paunang natukoy na mga minimum na lapad. Magagamit din ng developer ang line clamping class sa mga breakpoint na ito.

Ang syntax para sa paggamit ng line-clamping class na may mga breakpoint ay ang mga sumusunod:

Ang 'breakpoint prefix' na binanggit sa itaas na syntax ay ang mga sumusunod:

• sm: Ang breakpoint na ito ay may pinakamababang lapad na 640px.
• md: Ang breakpoint na ito ay may pinakamababang lapad na 768px.
• lg: Ang breakpoint na ito ay may pinakamababang lapad na 1024px.
• xl: Ang breakpoint na ito ay may pinakamababang lapad na 1280px.
• 2xl: Ang breakpoint na ito ay may pinakamababang lapad na 1536px.

Sa ipinakitang demonstrasyon sa ibaba, ang ' p ” elemento ay binibigyan ng iba't ibang klase ng line-clamp sa iba't ibang breakpoint. Babaguhin nito ang line-clamping property ng text block kapag naabot ang bagong breakpoint:

Ang elementong p ay binibigyan ng klase ng 'line-clamp-1' bilang default. Gayunpaman, ang nilalaman ng teksto sa elementong 'p' ay limitado sa isang linya para sa ' sm 'breakpoint, dalawang linya para sa ' md 'breakpoint, at tatlong linya para sa ' lg ” breakpoint.

Output

Mula sa output, malinaw na nagbabago ang line-clamp property ng text block habang nagbabago ang laki ng screen:

Ipinakita namin ang pamamaraan sa pag-clamp ng teksto sa isang partikular na bilang ng mga linya sa Tailwind.

Konklusyon

Nililimitahan ng line clamp class sa Tailwind ang nilalaman ng text ng isang elemento sa tinukoy na bilang ng mga linya. Ang klase ng 'lin-clamp-{number}' ay ginagamit bilang isang syntax para sa pag-clamp ng text sa mga limitadong linya. Maaaring gamitin ang line clamp class sa mga paunang natukoy na breakpoint at mga variant ng estado sa Tailwind. Ang artikulong ito ay nagbigay ng pamamaraan para sa pag-clamp ng teksto sa isang tinukoy na bilang ng mga linya.