Se lee en 2 minutos

Mediante la propiedad ‘ellipsis‘ de CSS3 podemos truncar texto que sobrepase (overflow) la anchura de su contenedor.

En el sencillo ejemplo que vamos a explicar veremos como aplicar una “elipsis” a un título H2, que podría ser por ejemplo el título de una App para Smartphone o Tablet, etc.

Ejemplo completo:

El CSS que “hace la magia” lo he incluido en una etiqueta style en el mismo archivo HTML para facilitar su comprensión. Vamos por partes:

En el body tenemos una etiqueta header en la que ponemos el título de la “App” mediante un H2. En nuestro CSS indicamos que el título H2 tenga las siguientes reglas CSS aplicadas:

Para nuestro ejemplo, el título se ajustará al 100% de la anchura disponible. Además le indicamos mediante “overflow:hidden;” que el texto del H2 que sobrepase ese ancho no se muestre. Mostraremos los tres puntos suspensivos.

Las dos propiedades siguientes también son imprescindibles para conseguir el efecto:

Con esto ya tenemos los tres puntos “…” asignados al final de nuestra larga cabecera.

Para mayor claridad,  he añadido un párrafo al body con el texto completo del título.

Este es el ejemplo

Tienes más información en Mozilla Developer Network.