Aquest article proporcionarà el procediment per subjectar el text en un Tailwind.
Com subjectar el text a un nombre específic de línies?
La classe de fixació de línies a Tailwind limita el contingut del text d'un bloc a un nombre determinat de línies. En fer això, el bloc de text amagarà el text després del nombre de línies especificat a la classe. Es pot utilitzar en una pàgina web per mostrar a l'usuari que hi ha informació de text o per ocultar tot el text innecessari per evitar la saturació de la pàgina web.
Sintaxi
La sintaxi que s'indica a continuació es proporciona al ' classe ” atribut d'un element per aplicar la fixació de línia:
En la sintaxi definida anteriorment, l'usuari pot utilitzar els números de ' 1 a 6 ” per utilitzar les classes de fixació de línia predeterminades. Per exemple, el ' pinça de línia-1 ” La classe no permetrà que el contingut del text superi una línia.
Entendrem el concepte de classe 'line-camp' a través d'alguns exemples.
Exemple 1: utilitzeu la classe Line Clamp per limitar el contingut a un nombre específic de línies
Limitem el contingut del text a tres línies utilitzant la classe de fixació de línies a Tailwind, tal com es fa a continuació:
< div classe = ' arrodonit-lg flex justify-center bg-slate-200 m-5 p-4' >
< pàg classe = 'line-clamp-3 w-72' > Aquest és un paràgraf de mostra. Només serà visible durant 3 línies. Tot el contingut després s'amagarà. Això es deu a la classe de subjecció de línia a Tailwind. < / pàg >
< / div >
L'explicació del codi anterior és la següent:
- A ' div L'element ' es crea amb cantonades arrodonides utilitzant el ' arrodonit-lg ” classe. Proporciona el marge i el farciment utilitzant el ' m-{nombre} ” & “ p-{nombre} ” classes.
- A continuació, l'element de l'element div es centra amb el ' justificar-centre classe ', i la ' flexionar ” La classe crea un contenidor que contindrà l'element fill del div.
- El ' bg-{color}-{nombre} ” class estableix el color de fons de l'element div.
- A ' ” es crea l'etiqueta que conté el contingut del text. Es proporciona una amplada fixa mitjançant el ' w-{nombre} ” classe.
- Finalment, el contingut del text de la “ pàg L'element ' està limitat a tres línies utilitzant el ' pinça de línia-3 ” classe.
Sortida
Es pot veure a la sortida que el contingut del text que supera el límit especificat de tres línies està amagat:
Exemple 2: utilitzeu la classe Line Clamp amb estats predeterminats a Tailwind
Tailwind proporciona diversos estats per defecte per a un element que es pot utilitzar per fer que els dissenys de disseny siguin més dinàmics. El desenvolupador pot utilitzar qualsevol classe Tailwind amb aquests estats per proporcionar la propietat de disseny especificada a l'element sempre que s'aconsegueixi aquest estat. De la mateixa manera, la classe 'line-clamp' també es pot utilitzar amb aquests estats Tailwind predeterminats.
La sintaxi per utilitzar la classe 'line-clamp' amb un estat a Tailwind es mostra a continuació:
{ estat } : pinça de línia- { nombre }Hi ha tres estats per defecte que es descriuen de la següent manera:
- passar el cursor: És l'estat d'un element quan l'usuari passa el cursor del ratolí per sobre.
- focus: És l'estat en què l'element està enfocat. Per exemple, l'usuari navega a l'element prement la tecla 'tab'.
- actiu: Estat en què l'usuari activa l'element.
A la demostració següent, tot és idèntic a l'exemple anterior. L'única diferència és que la classe de subjecció de línia es proporciona amb el ' flotar ' estat:
< div classe = ' arrodonit-lg flex justify-center bg-slate-200 m-5 p-4' >< pàg classe = 'hover:line-clamp-3 w-72' > Aquest és un paràgraf de mostra. Només serà visible durant 3 línies. Tot el contingut després s'amagarà. Això es deu a la classe de subjecció de lin a Tailwind. < / pàg >
< / div >
Tingueu en compte que el ' ” la classe és proporcionada per “ hover:line-clamp-3 ”, que limitarà el contingut del text a tres línies sempre que l'usuari passi el cursor del ratolí per sobre del quadre de contingut.
Sortida
A la sortida següent es pot veure que la propietat de fixació de línia s'aplica quan el cursor del ratolí passa per sobre del bloc:
Exemple 3: Utilitzeu la classe Line Clamp amb punts d'interrupció
Els punts d'interrupció són consultes multimèdia a Tailwind que ajuden els usuaris a crear un disseny de disseny responsiu. Tailwind proporciona cinc punts d'interrupció predeterminats amb amplades mínimes predefinides. El desenvolupador també pot utilitzar la classe de fixació de línia amb aquests punts d'interrupció.
La sintaxi per utilitzar una classe de fixació de línia amb punts d'interrupció és la següent:
{ prefixos de punt d'interrupció } : pinça de línia- { nombre }Els 'prefixos de punt d'interrupció' esmentats a la sintaxi anterior són els següents:
- sm: Aquest punt d'interrupció té una amplada mínima de 640 píxels.
- md: Aquest punt d'interrupció té una amplada mínima de 768 píxels.
- lg: Aquest punt d'interrupció té una amplada mínima de 1024 píxels.
- xl: Aquest punt d'interrupció té una amplada mínima de 1280 píxels.
- 2xl: Aquest punt d'interrupció té una amplada mínima de 1536 píxels.
A la demostració que es proporciona a continuació, el ' pàg ” L'element es proporciona amb diferents classes de pinça de línia en diferents punts d'interrupció. Això canviarà la propietat de fixació de línia del bloc de text sempre que s'arribi al nou punt d'interrupció:
< div classe = ' arrodonit-lg flex justify-center bg-slate-200 m-5 p-4' >< pàg classe = 'line-clamp-1 lg:line-clamp-3 md:line-clamp-2 sm:line-clamp-1 w-72' > Aquest és un paràgraf de mostra. Només serà visible durant 3 línies. Tot el contingut després s'amagarà. Això es deu a la classe de subjecció de lin a Tailwind. < / pàg >
< / div >
L'element p es proporciona amb una classe 'line-clamp-1' per defecte. Tanmateix, el contingut del text de l'element 'p' es limitarà a una línia per a l'element ' sm ” punt d'interrupció, dues línies per al “ md ” punt d'interrupció i tres línies per al “ lg 'punt d'interrupció.
Sortida
A partir de la sortida, queda clar que la propietat line-clamp del bloc de text canvia a mesura que canvia la mida de la pantalla:
Hem demostrat el procediment per subjectar el text a un nombre específic de línies a Tailwind.
Conclusió
La classe de fixació de línia a Tailwind limita el contingut del text d'un element al nombre especificat de línies. La classe 'lin-clamp-{number}' s'utilitza com a sintaxi per subjectar el text a línies limitades. La classe de pinça de línia es pot utilitzar amb els punts de ruptura predefinits i les variants d'estat a Tailwind. Aquest article ha proporcionat el procediment per fixar el text a un nombre determinat de línies.