"El diseño es el embajador silencioso de tu marca"
- Paul Brand

Cortar textos con puntos suspensivos con CSS

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.
 

Sin white-space
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet ornare lacus. Nullam suscipit mauris ac dui suscipit sodales. Donec vestibulum libero quis nunc efficitur, sit amet ultrices tellus placerat.
Con white-space: nowrap
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet ornare lacus. Nullam suscipit mauris ac dui suscipit sodales. Donec vestibulum libero quis nunc efficitur, sit amet ultrices tellus placerat.

 

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.
 

Con overflow:hidden
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet ornare lacus. Nullam suscipit mauris ac dui suscipit sodales. Donec vestibulum libero quis nunc efficitur, sit amet ultrices tellus placerat.

 

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

Con text-overflow: ellipsis
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet ornare lacus. Nullam suscipit mauris ac dui suscipit sodales. Donec vestibulum libero quis nunc efficitur, sit amet ultrices tellus placerat.

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

 

The following two tabs change content below.
Especialista en diseño web responsive, programador html5, css3, jquery, php y java.

Latest posts by Óscar Lijó (see all)