Cuando trabajas en el diseño de una página web es bastante habitual encontrarte con textos demasiado largos que rompen una tarjeta, desplazan otros elementos o hacen que una cuadrícula pierda completamente su armonía visual.
Una de las soluciones más sencillas consiste en cortar el texto con puntos suspensivos mediante CSS, de manera que el contenido desaparezca al alcanzar un determinado espacio y termine visualmente con ....
Esta técnica resulta especialmente útil en WordPress, WooCommerce, blogs, tiendas online, tarjetas de productos, listados de entradas, tablas y diseños responsive donde necesitas mantener todos los elementos perfectamente alineados.
En este tutorial vas a aprender cómo cortar un texto con puntos suspensivos, tanto en una sola línea como después de varias líneas, utilizando únicamente unas pocas propiedades CSS.
Qué significa cortar un texto con puntos suspensivos
Cortar un texto con puntos suspensivos significa ocultar la parte del contenido que no cabe dentro del espacio disponible y mostrar unos puntos suspensivos para indicar visualmente que existe más información.
Por ejemplo, un título completo como “Cómo crear una tienda online profesional utilizando WordPress y WooCommerce” podría mostrarse dentro de una tarjeta como “Cómo crear una tienda online profesional…”.
Esta solución recibe habitualmente el nombre de text truncation o truncamiento de texto y evita tener que modificar manualmente cada título, descripción o fragmento de contenido.
Además, al realizarlo mediante CSS, el texto original permanece intacto en el código HTML, por lo que simplemente estás modificando su presentación visual.
Cómo cortar un texto con puntos suspensivos en una línea
La forma más sencilla de hacerlo consiste en utilizar la propiedad CSS text-overflow: ellipsis, creada precisamente para indicar que un contenido desbordado debe terminar con puntos suspensivos.
Puedes utilizar el siguiente código:
.texto-cortado {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}Con estas tres propiedades conseguirás que el texto permanezca en una única línea y que cualquier contenido que supere el ancho disponible quede oculto.
La propiedad white-space: nowrap evita que el navegador pueda crear automáticamente una segunda línea cuando el texto llega al límite del contenedor.
La propiedad overflow: hidden hace que cualquier contenido situado fuera de los límites del elemento permanezca oculto.
Finalmente, text-overflow: ellipsis indica al navegador que debe sustituir visualmente el contenido oculto por puntos suspensivos.
Puedes consultar más detalles sobre esta propiedad en la documentación de text-overflow de MDN Web Docs.
Cómo aplicar los puntos suspensivos paso a paso
Si quieres utilizar esta solución en tu página solamente necesitas identificar el elemento que contiene el texto y aplicar las propiedades anteriores mediante CSS.
Puedes hacerlo siguiendo estos pasos:
- 🔎 Localiza el texto que quieres limitar dentro de tu página web.
- 🧩 Identifica su clase CSS utilizando las herramientas de desarrollador del navegador.
- ✏️ Añade la propiedad
white-space: nowrappara impedir que el contenido pueda ocupar varias líneas. - ✂️ Añade
overflow: hiddenpara ocultar la parte del texto que exceda el contenedor. - ➡️ Añade
text-overflow: ellipsispara mostrar los puntos suspensivos. - 📐 Comprueba que el elemento tenga un ancho limitado, ya que de lo contrario el navegador podría ampliar el contenedor para mostrar todo el texto.
- 📱 Comprueba el resultado en móvil y escritorio para asegurarte de que el truncamiento funciona correctamente en diferentes resoluciones.
Cómo definir el ancho del texto
Uno de los errores más habituales consiste en añadir text-overflow: ellipsis pero descubrir que los puntos suspensivos no aparecen.
Normalmente esto sucede porque el elemento no tiene ninguna limitación de anchura y puede crecer libremente para alojar todo su contenido.
Puedes establecer una anchura concreta de esta manera:
.texto-cortado {
width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}En este ejemplo, cualquier contenido que necesite más de 300 píxeles de ancho quedará automáticamente oculto.
También puedes utilizar max-width cuando quieras permitir cierta flexibilidad:
.texto-cortado {
max-width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}El uso de max-width suele ser especialmente interesante en diseños responsive, porque permite que el elemento pueda reducirse cuando el espacio disponible sea inferior.
Cómo cortar un texto después de varias líneas
En muchas situaciones no querrás limitar el contenido a una sola línea, sino permitir que aparezcan dos, tres o cuatro líneas antes de mostrar los puntos suspensivos.
Esto resulta particularmente útil para las descripciones de productos, extractos de entradas, tarjetas informativas o resultados de búsqueda.
Puedes limitar un texto a tres líneas utilizando este código:
.texto-tres-lineas {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}La propiedad -webkit-line-clamp permite establecer el número máximo de líneas visibles antes de ocultar el contenido restante.
Si quieres mostrar solamente dos líneas puedes cambiar el valor a 2:
-webkit-line-clamp: 2;Si quieres permitir cuatro líneas solamente tendrías que utilizar:
-webkit-line-clamp: 4;Puedes ampliar la información sobre esta técnica consultando la documentación de line-clamp en MDN Web Docs.
Tabla resumen para cortar textos con CSS
| Objetivo | Propiedad principal | Resultado |
|---|---|---|
| Cortar después de una línea | text-overflow: ellipsis | Una línea con puntos suspensivos |
| Evitar saltos de línea | white-space: nowrap | Mantiene todo el texto en una línea |
| Ocultar el texto sobrante | overflow: hidden | Esconde el contenido desbordado |
| Limitar el ancho | width o max-width | Define cuándo debe cortarse el texto |
| Limitar varias líneas | line-clamp | Permite mostrar dos o más líneas |
| Limitar a tres líneas | -webkit-line-clamp: 3 | Oculta el contenido después de tres líneas |
Cómo cortar los títulos de WordPress con puntos suspensivos
Esta técnica también puede utilizarse fácilmente para igualar la altura de los títulos de entradas de WordPress cuando aparecen dentro de una cuadrícula.
Por ejemplo, imaginemos que los títulos utilizan la clase .entry-title y quieres mostrar como máximo dos líneas.
Podrías utilizar:
.entry-title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}De esta manera conseguirás que todos los títulos ocupen aproximadamente el mismo espacio, independientemente de que algunos tengan cinco palabras y otros sean considerablemente más largos.
Esta pequeña modificación puede mejorar notablemente la estética de blogs, páginas de categorías y módulos de entradas relacionadas.
Cómo cortar los títulos de productos de WooCommerce
El mismo problema aparece con frecuencia en las páginas de tienda creadas con WooCommerce, especialmente cuando tienes productos con nombres de longitudes muy diferentes.
Dependiendo del tema utilizado, podrías aplicar una regla similar a esta:
.woocommerce-loop-product__title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}Con este código puedes hacer que los nombres de los productos ocupen como máximo dos líneas, facilitando que precios, botones y valoraciones permanezcan correctamente alineados.
Antes de aplicar el código conviene comprobar la clase exacta utilizada por tu tema, ya que las plantillas personalizadas pueden utilizar selectores diferentes.
Cómo mostrar el texto completo al pasar el ratón
Si estás ocultando información importante puede ser interesante proporcionar al usuario alguna manera de consultar el contenido completo.
Una opción sencilla consiste en utilizar el atributo HTML title:
<p class="texto-cortado" title="Este es el contenido completo que quieres mostrar">
Este es el contenido completo que quieres mostrar
</p>Cuando el usuario coloque el cursor encima del elemento podrá visualizar el texto completo mediante el comportamiento habitual del navegador.
Para interfaces más elaboradas puedes recurrir a tooltips accesibles mediante JavaScript o componentes específicos de tu constructor visual.
Errores habituales al utilizar text-overflow ellipsis
Aunque el código es muy pequeño, existen algunas situaciones que pueden provocar que los puntos suspensivos no funcionen como esperabas.
Comprueba especialmente estos aspectos:
- ⚠️ No utilizar
overflow: hidden, porque el contenido puede continuar mostrándose fuera del contenedor. - ⚠️ Olvidar
white-space: nowrapcuando quieres limitar el texto exclusivamente a una línea. - ⚠️ No establecer ningún límite de anchura, haciendo que el elemento simplemente aumente de tamaño.
- ⚠️ Aplicar el CSS al selector equivocado, algo especialmente frecuente en WordPress y constructores visuales.
- ⚠️ Utilizar
text-overflow: ellipsispara varias líneas, porque esta propiedad por sí sola está pensada principalmente para truncamientos de una sola línea. - ⚠️ No comprobar el diseño en dispositivos móviles, donde el espacio disponible puede cambiar considerablemente.
Cuándo utilizar puntos suspensivos en una web
Los puntos suspensivos son especialmente útiles cuando necesitas mantener una interfaz limpia y uniforme sin eliminar realmente contenido.
Puedes utilizarlos en tarjetas de artículos, títulos de productos, widgets, tablas, menús, breadcrumbs, resultados de búsqueda, comentarios, perfiles de usuario y paneles de administración.
Sin embargo, no conviene abusar del truncamiento en textos que contienen información imprescindible para que el usuario pueda tomar una decisión.
Si estás ocultando una descripción importante, procura ofrecer algún mecanismo para leer el contenido completo mediante un enlace, una página individual, un tooltip o un botón para ampliar información.
Ventajas de cortar un texto mediante CSS
La principal ventaja de esta solución es que no necesitas modificar el contenido original ni utilizar JavaScript para realizar un truncamiento sencillo.
También consigues mantener una apariencia visual mucho más uniforme, algo especialmente importante cuando diferentes elementos aparecen organizados dentro de filas o columnas.
Además, el código necesario es extremadamente pequeño y puede añadirse fácilmente desde el CSS adicional de WordPress, un tema hijo, un constructor visual o una hoja de estilos personalizada.
Puedes consultar otras propiedades disponibles para controlar la visualización del contenido en la sección dedicada a CSS de MDN Web Docs.
Conclusión
Aprender cómo cortar un texto con puntos suspensivos mediante CSS puede ayudarte a solucionar rápidamente numerosos problemas de diseño provocados por títulos o descripciones demasiado extensos.
Para una sola línea normalmente necesitarás combinar white-space: nowrap, overflow: hidden y text-overflow: ellipsis.
Cuando quieras mantener varias líneas visibles puedes recurrir a line-clamp, indicando directamente cuántas líneas debe mostrar el navegador antes de ocultar el resto del contenido.
Con apenas unas líneas de CSS puedes conseguir tarjetas más ordenadas, productos mejor alineados y diseños responsive mucho más consistentes, sin modificar ni eliminar el contenido original de tu página.
