Este artículo proporcionará el procedimiento para sujetar el texto en Tailwind.
¿Cómo sujetar texto a un número específico de líneas?
La clase de fijación de línea en Tailwind limita el contenido del texto en un bloque a un número particular de líneas. Al hacer esto, el bloque de texto ocultará el texto después del número de líneas especificadas en la clase. Se puede utilizar en una página web para mostrarle al usuario que hay información de texto o para ocultar todo el texto innecesario para evitar la saturación de la página web.
Sintaxis
La sintaxis que se proporciona a continuación se proporciona en el archivo ' clase Atributo de un elemento para aplicar sujeción de línea:
En la sintaxis definida anteriormente, el usuario puede utilizar los números de ' 1 a 6 ”para usar las clases de sujeción de línea predeterminadas. Por ejemplo, el “ abrazadera de línea-1 'La clase no permitirá que el contenido del texto exceda una línea.
Entendamos el concepto de clase “line-camp” a través de algunos ejemplos.
Ejemplo 1: utilizar la clase de sujeción de línea para limitar el contenido a un número específico de líneas
Limitemos el contenido del texto a tres líneas usando la clase de sujeción de línea en Tailwind como se hace a continuación:
< div clase = 'redondeado-lg flex justificar-centro bg-pizarra-200 m-5 p-4' >
< pag clase = 'abrazadera-de-línea-3 w-72' > Este es un párrafo de muestra. Sólo será visible durante 3 líneas. Todo el contenido posterior quedará oculto. Esto se debe a la clase de sujeción de línea en Tailwind. < / pag >
< / div >
La explicación del código anterior es la siguiente:
- A ' div El elemento 'se crea con esquinas redondeadas usando el' redondeado-lg ' clase. Proporciona el margen y el relleno utilizando el botón ' m-{número} ” & “ p-{número} “clases.
- A continuación, el elemento en el elemento div se centra usando el botón ' justificar-centro 'clase, y la' doblar La clase 'crea un contenedor que contendrá el elemento secundario del div.
- El ' bg-{color}-{número} La clase 'establece el color de fondo del elemento div.
- A ' Se crea una etiqueta que contiene el contenido del texto. Se proporciona un ancho fijo utilizando el botón ' w-{número} ' clase.
- Finalmente, el contenido del texto del “ pag El elemento 'está limitado a tres líneas usando el' abrazadera-de-linea-3 ' clase.
Producción
Se puede ver en el resultado que el contenido de texto que excedió el límite especificado de tres líneas está oculto:
Ejemplo 2: utilizar la clase de sujeción de línea con estados predeterminados en Tailwind
Tailwind proporciona varios estados predeterminados para un elemento que se pueden utilizar para hacer que los diseños sean más dinámicos. El desarrollador puede utilizar cualquier clase Tailwind con estos estados para proporcionar la propiedad de diseño especificada al elemento siempre que se alcance ese estado. De manera similar, la clase “line-clamp” también se puede usar con estos estados predeterminados de Tailwind.
La sintaxis para usar la clase 'line-clamp' con un estado en Tailwind se proporciona a continuación:
{ estado } : abrazadera de línea { número }Hay tres estados predeterminados que se describen a continuación:
- flotar: Es el estado de un elemento cuando el usuario pasa el cursor del mouse sobre él.
- enfocar: Es el estado en el que el elemento está enfocado. Por ejemplo, el usuario navega hasta el elemento presionando la tecla 'tab'.
- activo: El estado en el que el usuario activa el elemento.
En la siguiente demostración, todo es idéntico al ejemplo anterior. La única diferencia es que la clase de sujeción de línea se proporciona con el ' flotar ' estado:
< div clase = 'redondeado-lg flex justificar-centro bg-pizarra-200 m-5 p-4' >< pag clase = 'hover: abrazadera de línea-3 w-72' > Este es un párrafo de muestra. Sólo será visible durante 3 líneas. Todo el contenido posterior quedará oculto. Esto se debe a la clase de sujeción lin en Tailwind. < / pag >
< / div >
Tenga en cuenta que el “ 'La clase es proporcionada por el' flotar: abrazadera de línea-3 ”, que limitará el contenido del texto a tres líneas cada vez que el usuario coloque el cursor del mouse sobre el cuadro de contenido.
Producción
Se puede ver en el siguiente resultado que la propiedad de sujeción de línea se aplica cuando el cursor del mouse se sitúa sobre el bloque:
Ejemplo 3: utilizar la clase de sujeción de línea con puntos de interrupción
Los puntos de interrupción son consultas de medios en Tailwind que ayudan a los usuarios a crear un diseño responsivo. Tailwind proporciona cinco puntos de interrupción predeterminados con anchos mínimos predefinidos. El desarrollador también puede utilizar la clase de sujeción de línea con estos puntos de interrupción.
La sintaxis para usar una clase de fijación de línea con puntos de interrupción es la siguiente:
{ prefijos de punto de interrupción } : abrazadera de línea { número }Los 'prefijos de punto de interrupción' mencionados en la sintaxis anterior son los siguientes:
- SM: Este punto de interrupción tiene un ancho mínimo de 640 px.
- Maryland: Este punto de interrupción tiene un ancho mínimo de 768 px.
- LG: Este punto de interrupción tiene un ancho mínimo de 1024 px.
- SG: Este punto de interrupción tiene un ancho mínimo de 1280 px.
- 2XL: Este punto de interrupción tiene un ancho mínimo de 1536 px.
En la demostración que se proporciona a continuación, el ' pag El elemento 'se proporciona con diferentes clases de abrazadera de línea en diferentes puntos de interrupción. Esto cambiará la propiedad de sujeción de línea del bloque de texto cada vez que se alcance el nuevo punto de interrupción:
< div clase = 'redondeado-lg flex justificar-centro bg-pizarra-200 m-5 p-4' >< pag clase = 'abrazadera-línea-1 lg:abrazadera-línea-3 md:abrazadera-línea-2 sm:abrazadera-línea-1 w-72' > Este es un párrafo de muestra. Sólo será visible durante 3 líneas. Todo el contenido posterior quedará oculto. Esto se debe a la clase de sujeción lin en Tailwind. < / pag >
< / div >
El elemento p cuenta con una clase 'line-clamp-1' de forma predeterminada. Sin embargo, el contenido de texto en el elemento 'p' se limitará a una línea para el ' sm 'punto de interrupción, dos líneas para el' Maryland 'punto de interrupción y tres líneas para el' LG ”punto de interrupción.
Producción
Del resultado, queda claro que la propiedad de sujeción de línea del bloque de texto cambia a medida que cambia el tamaño de la pantalla:
Hemos demostrado el procedimiento para sujetar texto a un número específico de líneas en Tailwind.
Conclusión
La clase de sujeción de línea en Tailwind limita el contenido de texto de un elemento al número especificado de líneas. La clase “lin-clamp-{number}” se utiliza como sintaxis para sujetar el texto a líneas limitadas. La clase de sujeción de línea se puede utilizar con los puntos de interrupción predefinidos y las variantes de estado en Tailwind. Este artículo proporciona el procedimiento para sujetar el texto a un número específico de líneas.