Cuando diseñas una página web, es habitual encontrarte con textos de distinta longitud que terminan alterando la apariencia de tarjetas, listados de productos, entradas de blog o cualquier otro elemento de tu diseño.
Con unas pocas propiedades de CSS puedes limitar un texto a dos líneas y ocultar automáticamente todo el contenido que sobrepase ese espacio.
Esta técnica resulta especialmente útil cuando trabajas con diseños dinámicos en los que no puedes controlar exactamente cuánto texto introducirá cada usuario o cuánto ocupará cada título.
Además, puedes hacer que el navegador muestre unos puntos suspensivos al final del texto, dejando claro al visitante que existe contenido adicional que ha sido recortado.
En este tutorial aprenderás cómo limitar un texto a dos líneas con CSS, cómo funciona cada propiedad y qué alternativas puedes utilizar dependiendo de tu proyecto.
¿Por qué limitar un texto a dos líneas con CSS?
Limitar la cantidad de líneas permite mantener una altura uniforme entre diferentes elementos, algo especialmente importante cuando utilizas diseños basados en columnas o cuadrículas.
Imagina que tienes una sección con varias tarjetas de artículos y que algunos títulos ocupan una línea mientras otros llegan hasta cuatro o cinco líneas.
El resultado será una composición irregular en la que cada tarjeta puede terminar teniendo una altura diferente y los botones inferiores aparecerán completamente desalineados.
Al limitar todos esos títulos a un máximo de dos líneas de texto, conseguirás una estructura mucho más equilibrada sin necesidad de modificar manualmente cada contenido.
Esta técnica también resulta útil para descripciones de productos, extractos de entradas, comentarios, testimonios, fichas de servicios o textos generados dinámicamente.
CSS para limitar un texto a dos líneas
La forma más habitual de conseguirlo consiste en utilizar la propiedad line-clamp junto con algunas propiedades adicionales que controlan cómo se muestra y se oculta el contenido.
Puedes utilizar el siguiente código CSS:
.texto-dos-lineas {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}Después solamente necesitas añadir la clase texto-dos-lineas al elemento cuyo contenido quieres limitar.
Por ejemplo, podrías utilizar este código HTML:
<p class="texto-dos-lineas">
Este es un texto bastante largo que solamente queremos mostrar durante dos líneas para mantener el diseño de nuestra página perfectamente alineado.
</p>El navegador mostrará únicamente las dos primeras líneas disponibles y ocultará automáticamente el contenido restante.
Puedes consultar más información técnica sobre esta característica en la documentación de line-clamp de MDN Web Docs.
Cómo funciona cada propiedad CSS
Aunque el fragmento anterior es bastante pequeño, cada una de sus propiedades desempeña una función concreta para conseguir el resultado esperado.
La propiedad display: -webkit-box transforma el elemento en un contenedor compatible con el sistema utilizado para limitar el número visible de líneas.
La propiedad -webkit-box-orient: vertical establece que el contenido debe distribuirse verticalmente dentro de ese contenedor.
La propiedad -webkit-line-clamp: 2 establece precisamente que solamente quieres mostrar un máximo de dos líneas.
Finalmente, overflow: hidden oculta todo el contenido que excede el espacio disponible dentro del elemento.
El resultado es un bloque de texto compacto que conserva su contenido original en el HTML, aunque visualmente solamente aparezcan las primeras líneas.
Cómo limitar un texto a dos líneas paso a paso
Puedes implementar esta técnica prácticamente en cualquier página web siguiendo unos pocos pasos.
- 🔎 Identifica el elemento que contiene el texto que quieres limitar, como un título, párrafo, descripción o extracto.
- 🏷️ Añade una clase CSS específica al elemento para poder modificarlo sin afectar accidentalmente a otros textos de la página.
- 🎨 Añade las propiedades display, box-orient, line-clamp y overflow dentro de tu hoja de estilos.
- 📏 Configura -webkit-line-clamp: 2 para limitar el contenido exactamente a dos líneas.
- 💻 Guarda los cambios y comprueba el resultado tanto en ordenador como en dispositivos móviles.
- 📱 Revisa diferentes anchuras de pantalla porque el número de palabras que caben en dos líneas puede cambiar considerablemente dependiendo del dispositivo.
Cómo limitar un título a dos líneas
Uno de los usos más frecuentes de esta técnica aparece en los títulos de artículos, productos o tarjetas.
Puedes aplicar exactamente el mismo código utilizando una clase específica para tus encabezados.
.titulo-tarjeta {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}De esta forma conseguirás que todos los títulos mantengan una altura visual mucho más uniforme, incluso aunque algunos tengan bastante más contenido que otros.
Esta solución resulta especialmente práctica cuando construyes diseños utilizando CSS Grid o Flexbox.
Cómo cambiar el número máximo de líneas
Aunque estamos utilizando dos líneas como ejemplo, puedes modificar fácilmente el código para mostrar cualquier otra cantidad.
Si quieres limitar el contenido a tres líneas, solamente necesitas cambiar el valor de la propiedad correspondiente.
.texto-tres-lineas {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}También puedes utilizar valores como 1, 4, 5 o cualquier otro número entero dependiendo del espacio disponible dentro de tu diseño.
Esta flexibilidad permite utilizar la misma técnica en diferentes zonas de una página adaptando solamente una propiedad.
Limitar un texto a una sola línea
Si solamente quieres mostrar una línea, puedes utilizar una técnica ligeramente diferente que lleva muchos años siendo habitual en CSS.
.texto-una-linea {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}La propiedad white-space: nowrap evita que el contenido salte a una segunda línea.
Mientras tanto, text-overflow: ellipsis permite mostrar los conocidos puntos suspensivos cuando el contenido supera el espacio horizontal disponible.
Esta solución es especialmente apropiada para nombres de usuario, títulos pequeños, rutas, nombres de archivos o etiquetas.
Puedes consultar la documentación oficial de text-overflow para conocer todas sus posibilidades.
Tabla resumen de propiedades
| Propiedad CSS | Función |
|---|---|
display: -webkit-box | Crea el contenedor necesario para controlar las líneas |
-webkit-box-orient: vertical | Organiza el contenido verticalmente |
-webkit-line-clamp: 2 | Limita el texto a dos líneas |
overflow: hidden | Oculta el contenido sobrante |
white-space: nowrap | Evita los saltos de línea |
text-overflow: ellipsis | Añade puntos suspensivos al contenido recortado |
Cómo aplicar el CSS en WordPress
Si utilizas WordPress, puedes implementar esta técnica sin necesidad de instalar ningún plugin adicional.
Dependiendo de tu tema o constructor visual, puedes añadir la clase al elemento correspondiente y colocar el código CSS dentro del área destinada al CSS personalizado.
Por ejemplo, podrías crear una clase denominada limitar-titulo y asignarla a los títulos de determinadas tarjetas o módulos.
.limitar-titulo {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}Si utilizas un constructor como Elementor, Gutenberg, Spectra o cualquier herramienta similar, normalmente encontrarás un apartado donde puedes introducir clases CSS adicionales.
Después solamente tendrás que colocar el código en la hoja de estilos de tu tema, en el personalizador o en el sistema de CSS personalizado que utilice tu instalación.
¿Afecta esta técnica al SEO?
Limitar visualmente el texto con CSS no elimina el contenido del código HTML, sino que solamente evita que una parte sea visible dentro del diseño.
Por este motivo, el texto completo continúa estando presente en el documento y puede seguir formando parte del contenido de la página.
Aun así, conviene utilizar esta técnica principalmente como una herramienta de diseño y usabilidad y no como una forma de ocultar grandes cantidades de contenido deliberadamente.
También debes asegurarte de que el texto visible proporciona suficiente información para que el usuario pueda comprender el contexto sin necesidad de ver inmediatamente el contenido completo.
Problemas habituales al limitar textos con CSS
Uno de los errores más frecuentes consiste en utilizar únicamente -webkit-line-clamp: 2 sin añadir las propiedades necesarias para que funcione correctamente.
También puede ocurrir que otro estilo de tu plantilla modifique la propiedad display del elemento y termine anulando el comportamiento esperado.
En esos casos puedes utilizar las herramientas de desarrollo del navegador para comprobar qué reglas CSS están afectando realmente al elemento.
Puedes abrir estas herramientas normalmente pulsando F12 o haciendo clic con el botón derecho sobre el elemento y seleccionando la opción de inspección.
Otro aspecto importante es comprobar cómo se comporta el texto en diferentes dispositivos porque dos líneas en escritorio pueden contener muchas más palabras que dos líneas en un teléfono móvil.
Ejemplo completo para una tarjeta
Puedes combinar esta técnica con otros estilos para crear una tarjeta sencilla con un título limitado.
<article class="tarjeta">
<h2 class="titulo-limitado">
Este es un título bastante largo que queremos limitar automáticamente a solamente dos líneas
</h2>
<p>Contenido de la tarjeta.</p>
</article>.titulo-limitado {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}Con este pequeño fragmento conseguirás que todos los títulos largos ocupen como máximo dos líneas, facilitando considerablemente la creación de diseños ordenados.
Ventajas de limitar un texto con CSS
✅ Mantienes una altura más uniforme entre tarjetas y elementos similares.
✅ Evitas que los títulos demasiado largos rompan la estructura visual de tu página.
✅ No necesitas recortar manualmente los textos desde WordPress o desde tu gestor de contenidos.
✅ Puedes cambiar fácilmente el número máximo de líneas modificando un único valor.
✅ La solución funciona especialmente bien en diseños responsive y contenidos dinámicos.
✅ Puedes reutilizar la misma clase CSS en tantos elementos como necesites.
Conclusión
Aprender cómo limitar un texto a dos líneas con CSS puede parecer un pequeño detalle, pero puede mejorar notablemente la apariencia de cualquier página que contenga textos de longitud variable.
Con propiedades como -webkit-line-clamp, overflow y -webkit-box-orient puedes controlar fácilmente cuánto contenido aparece sin tener que modificar el texto original.
Esta solución es especialmente útil en tarjetas, tiendas online, blogs, portfolios, listados y diseños con columnas, donde mantener una estructura uniforme resulta fundamental.
Si quieres utilizar más o menos líneas solamente tienes que modificar el valor de -webkit-line-clamp, por lo que puedes adaptar rápidamente la técnica a prácticamente cualquier diseño.
