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 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.

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.

Ahora que ya sabes cómo cortar textos con puntos suspensivos con CSS, te pueden interesar los artículos Cómo utilizar el atributo overflow-wrap para romper palabras en varias líneas y Repasamos las posibilidades de la propiedad text-overflow de CSS3.

Fernán García de Zúñiga

Artículos relacionados

Productos relacionados: