Cortar textos con puntos suspensivos con CSS

2 minutos de lectura

Fecha: 31/10/2018

Existen casos en que nos interesa recortar los textos para que ocupen como máximo todo el ancho disponible. Esto se debe o bien a necesidades del diseño cuando no queremos que el tamaño de contenedor este condicionado por el tamaño del texto, o en el caso de las tablas cuando pretendemos que todas las tuplas tengan el mismo alto.

Además de esto cuando lo que queremos acotar es un texto es muy útil que al tener que cortar un texto se añadan automáticamente los puntos suspensivos para dar a entender al usuario lo que esta sucediendo.

Realmente tenemos una propiedad CSS que sirve para hacer eso, pero no funciona por si sola y me gustaría explicar como hay que combinarla para obtener el resultado esperado.

Forzar a que el texto no salte de linea

El primer paso es forzar al texto a que no salte de linea, pues precisamente si lo que quieres es que al llegar al ancho disponible el texto se corte, no podemos dejar que salte de linea, porque entonces nunca se produciría el corte.

Para hacer esto usamos la primera de las propiedades css que hay que usar en combinación, la propiedad white-space, veamos como funciona, voy a usar un wrapper de 300px con el fondo en color amarillo para que ver las diferencias.

Cortar los textos cuando alcancen el ancho disponible

Como hemos visto, hemos hecho desaparecer los saltos de linea, pero ahora el texto desborda el contendor y necesitamos cortarlo, para ello tenemos disponible la conocida propiedad overflow.

Añadir automáticamente los puntos suspensivos

Lo último que queda por hacer es que ahora cuando el texto sea tan largo que necesite ser cortado, se le añadan automáticamente los puntos suspensivos, la propiedad de que nos sirve es text-overflow la cual nos permite definir cual es la estrategia a seguir cuando el texto desborda el ancho del contenedor.

Aunque hay varias maneras, en concreto para poner los puntos suspensivos hay que darle el valor ‘ellipsis’.

Ahora ya sabemos que esta técnica funcione tenemos que tener estas propiedades y un ancho fijo en nuestro contenedor.

.box{
  width:300px;
  text-overflow:ellipsis;
  white-space:nowrap; 
  overflow:hidden; 
}