La propiedad CSS line-clamp nos permite acortar un texto a un número específico de líneas, lo que resulta especialmente útil en interfaces de usuario donde el espacio es limitado. Además de truncar el texto, line-clamp se combina con otras propiedades CSS, como display y overflow, para ajustar el comportamiento del texto, incluyendo la adición de puntos suspensivos, también llamados puntos de elipsis, al final del texto truncado.
1. Cómo acortar texto a un número de líneas en CSS
Para acortar o limitar un texto a un número de líneas y que, además, aparezcan los tres puntos suspensivos usaremos la propiedad line-clamp, junto con varias propiedades más. Veamos cómo implementarlo en CSS.
p {
display: -webkit-box; /* 1: crea un contenedor flexible tipo caja */
-webkit-box-orient: vertical; /* 2: orienta la caja en vertical */
-webkit-line-clamp: 3; /* 3: indica el número de líneas que se mostrarán */
overflow: hidden; /* 4: oculta el resto del texto que sobrepasa */
}
2. Cómo implementar line-clamp en CSS
Para limitar un texto a un número concreto de líneas le aplicaremos las siguientes propiedades:
display: -webkit-box;: Esta propiedad se utiliza para establecer el tipo de caja de diseño utilizado para el elemento. En este caso,-webkit-boxes necesario para compatibilidad con navegadores basados en WebKit, como Safari y Chrome.-webkit-line-clamp: <numero_de_lineas>;: Esta es la parte principal de la propiedadline-clamp. Aquí se especifica el número de líneas que se mostrarán antes de truncar el texto. Por ejemplo, si estableces-webkit-line-clamp: 3;, solo se mostrarán las primeras tres líneas del texto y el resto será truncado.-webkit-box-orient: horizontal | vertical;: Esta propiedad se utiliza para establecer la orientación del contenido dentro del contenedor. En el contexto deline-clamp, normalmente se usaverticalpara que los elementos de línea se apilen verticalmente dentro del contenedor flexible, permitiendo así la truncación vertical del texto.horizontal: Los elementos se apilan horizontalmente.vertical: Los elementos se apilan verticalmente.
overflow: hidden;: Esta propiedad se utiliza para ocultar el contenido que se desborda del contenedor. Es importante para asegurarse de que el texto truncado no sea visible fuera del área designada.
Sintaxis:
.elemento-truncado {
display: -webkit-box;
-webkit-line-clamp: <numero_de_lineas>;
-webkit-box-orient: horizontal | vertical;
overflow: hidden;
}
Ejemplo de implementación:
Supongamos que queremos truncar un párrafo después de mostrar solo 3 líneas de texto. Podemos aplicar line-clamp de la siguiente manera:
.parrafo-truncado {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
En este ejemplo, cualquier texto dentro de un elemento con la clase .parrado-truncado se truncará después de mostrar solo 3 líneas, y los tres puntos suspensivos (…) se añadirán automáticamente para indicar que el contenido ha sido truncado. Esto es útil para mostrar fragmentos de texto en interfaces de usuario donde el espacio es escaso.
3. Ejemplos prácticos de line-clamp
La propiedad line-clamp es una herramienta versátil que puede aplicarse en una variedad de situaciones en el diseño web. A continuación, se presentan algunos ejemplos prácticos de cómo utilizar line-clamp para mejorar la legibilidad y el diseño de tu contenido:
Ejemplo 1: Truncado de texto en cards o tarjetas de contenido
En tarjetas de contenido, como aquellas utilizadas en diseño de mosaicos o galerías, puedes utilizar line-clamp para truncar el texto que acompaña a cada tarjeta después de un número específico de líneas. Esto permite mantener un diseño uniforme y consistente en toda la presentación de tarjetas, proporcionando una experiencia visualmente atractiva y fácil de leer para los usuarios.
.card-text {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
Ejemplo 2: Acortar textos de los encabezados o subtítulos
En secciones de una página web donde los encabezados o subtítulos pueden ser demasiado largos, puedes utilizar line-clamp para truncarlos después de un cierto número de líneas. Esto ayuda a mantener un diseño limpio y evitar que los encabezados dominen visualmente la página.
.title-truncado{
display: -webkit-box;
-webkit-line-clamp: 2; /* Truncar después de 2 líneas */
-webkit-box-orient: vertical;
overflow: hidden;
}
.subtitle-truncado {
display: -webkit-box;
-webkit-line-clamp: 4; /* Truncar después de 4 líneas */
-webkit-box-orient: vertical;
overflow: hidden;
}
Ejemplo 3: Acortar textos de productos en una tienda online
En una tienda online, puedes utilizar line-clamp para truncar las descripciones largas de productos después de un cierto número de líneas. Esto permite a los usuarios obtener una vista previa del contenido sin abrumarlos con información excesiva.
.product-description {
display: -webkit-box;
-webkit-line-clamp: 3; /* Truncar después de 3 líneas */
-webkit-box-orient: vertical;
overflow: hidden;
}
Otros ejemplos de uso de line-clamp
Resúmenes de noticias o artículos:
En una página de inicio o una sección de noticias, puedes utilizar line-clamp para mostrar resúmenes breves de noticias o artículos. Esto permite a los usuarios escanear rápidamente el contenido y decidir si desean leer más.
Extractos de comentarios o reseñas:
En una sección de comentarios o reseñas, puedes utilizar line-clamp para truncar los extractos largos después de un cierto número de líneas. Esto permite a los usuarios obtener una vista previa rápida del contenido sin tener que desplazarse demasiado.
Como ves, line-clamp es una herramienta útil para mejorar la legibilidad y el diseño de tu sitio web al truncar el texto a un número específico de líneas. Experimenta con esta propiedad CSS en tu próximo proyecto y observa cómo mejora la presentación de tu contenido.