Super micro tip de css, puntos suspensivos, elipsis automática mediante html y css.

Super micro tip de css, puntos suspensivos, elipsis automática mediante html y css.

Vamos a ver la propiedad text-overflow y su valor ellipsis, algo bien simple y práctico que no se suele tener en cuenta.

Al disponer de un ancho fijo, con el overflow hidden, es decir que no se muestre lo que supere el ancho de nuestra caja, y que no se re ordene al declarar nowrap al white-space, podemos además mostrar los 3 puntos suspensivos si le adjudicamos el valor ellipsis a text-overflow.

Si la caja supera el width de 250 px va a recortar el texto y mostrar tres puntos suspensivos.

Por ejemplo:

.puntosuspensivos {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

Sin comentarios

Comenta!