Cortar textos con puntos suspensivos con CSS

3min

En ocasiones, a la hora de crear una página web o crear una tienda online, nos encontramos que en un espacio donde queremos situar un texto no cabe por completo en el lugar que hemos establecido. En el siguiente artículo, recortaremos esa línea y colocaremos unos puntos suspensivos para indicar que esa frase continúa y lo haremos sólo con CSS. Para ello, utilizaremos el atributo text-overflow con el valor clave ellipsis y lo usaremos en conjunto con el atributo overflow y un contenedor que limite su anchura.

Antes de la explicación detallada sobre cómo cortar textos con puntos suspensivos con CSS, os ofrecemos su sencilla solución:

div {
 width: 230px;
 white-space: nowrap;
 text-overflow: ellipsis;
 overflow: hidden;
 }

Y a continuación, explicamos cada uno de los atributos del ejemplo anterior:

  • width. La anchura del contenedor deberemos de limitarla, pues si no lo hacemos podría caber todo el contenido y no mostrarnos los puntos suspensivos. La limitación podrías tenerla en un contenedor padre, o bien que la recoja de la anchura (en pixeles) que soporte la pantalla del dispositivo.
  • white-space: nowrap. Sirve para cuando se acaba el espacio, el texto continúe en la parte de abajo, en una nueva línea, porque si no, el texto se adaptaría al espacio asignado y crecería en altura.
  • text-overflow: ellipsis. Con esto, indicamos que si no cabe todo el texto, que nos ponga una ellipsis (los famosos puntos suspensivos que queremos situar).
  • overflow: hidden. Por último, con este atributo, evitaremos que el texto se salga del contenedor y que los puntos suspensivos se muestren dentro de él.
Índice

¿Por qué cortar textos con puntos suspensivos con CSS y no con programación?

Cuando no teníamos esta funcionalidad disponible a partir de CSS, utilizábamos programación, algo que resulta sencillo, pero que tenemos que invertir tiempo y que no ofrece la misma versatilidad. Por ejemplo, si lo hacemos a partir de PHP para gestionar la cadena y poder colocar los puntos suspensivos, nos encontraremos con el problema de la adaptabilidad al tamaño del contenedor.

Si utilizamos un diseño responsive y tiramos de programación, es posible que no quede el texto perfectamente adaptado al contenedor, por lo que se hace más sencillo aplicar CSS y sea el propio navegador el que recorte el espacio y se adapte a las dimensiones de la página. Además, nos ahorraremos código adicional y hará que la página cargue antes y tenga un mayor rendimiento.

¿Qué es el atributo text-overflow en CSS?

El atributo text-overflow es una propiedad de CSS que permite manejar el contenido desbordado en un elemento cuando el texto excede el ancho del contenedor. Su valor ellipsis genera automáticamente los puntos suspensivos al final del texto visible.

Para que text-overflow funcione correctamente, necesitas combinarlo con las siguientes propiedades:

overflow: Define cómo se comporta el contenido que excede los límites del contenedor. white-space: Controla cómo se gestiona el espaciado y si el texto puede dividirse en varias líneas. Definir un ancho máximo: Es necesario limitar el tamaño del contenedor.

Cómo implementar los puntos suspensivos con CSS

Código Básico

A continuación, se presenta un ejemplo práctico:

.contenedor-texto {
white-space: nowrap; /* Evita que el texto se divida en varias líneas */
overflow: hidden; /* Oculta el texto que exceda el ancho del contenedor */
text-overflow: ellipsis; /* Agrega puntos suspensivos al final */
width: 200px; /* Define un ancho fijo para el contenedor */
display: block; /* Asegura que el elemento ocupe una línea completa */
}

HTML de Ejemplo

<div class='contenedor-texto'>
Este es un ejemplo de texto muy largo que será truncado con puntos suspensivos al final.
</div>

Explicación de las propiedades

1. white-space: nowrap. Evita los saltos de línea automáticos, forzando que el texto se muestre en una sola línea.

2. overflow: hidden. Oculta cualquier texto que no quepa dentro del ancho especificado.

3. text-overflow: ellipsis. Añade automáticamente los puntos suspensivos al final del texto visible.

4. width. Define el límite del espacio disponible para el texto. Sin esta propiedad, el efecto no funcionará correctamente.

Ajustes avanzados

Texto en varias líneas con puntos suspensivos

Para truncar texto en varias líneas, necesitas un enfoque diferente, utilizando la propiedad line-clamp junto con -webkit- prefijos.

.contenedor-texto-multilinea {
display: -webkit-box; 
-webkit-line-clamp: 3; /* Limita el texto a 3 líneas */
-webkit-box-orient: vertical;
overflow: hidden; /* Oculta el contenido desbordado */
}

Ejemplo HTML

<div class='contenedor-texto-multilinea'>
Este es un ejemplo de texto muy largo que será truncado con puntos suspensivos después de mostrar tres líneas.
</div>

Cómo recortar el texto si tenemos varias líneas

Cuando tenemos un texto que ocupa varias líneas, el método que hemos utilizado anteriormente con el CSS no nos servirá, y esto es porque el texto siempre se va a adaptar para seguir en la siguiente línea. Para estos casos, deberemos utilizar un lenguaje de programación y gestionar la cadena para que nos muestre los puntos suspensivos.

Fernán García de Zúñiga

Artículos relacionados

Productos relacionados: