Warning: Declaration of Social_Stats_Table::get_sortable_columns($is_sortable) should be compatible with WP_List_Table::get_sortable_columns() in /homepages/24/d429384128/htdocs/ismaelgsan/wp-content/plugins/wpsocialstats/classes/social_stats_table.php on line 7
Cómo cortar palabras añadiendo puntos suspensivos en CSS

A día de hoy, todos tenemos numerosos dispositivos con los que podemos acceder a la web. Estos dispositivos, como pueden ser ordenadores, móviles, tabletas o televisores, tienen distintas características y dimensiones. Por ello, a la hora de realizar una web, los desarrolladores debemos tener en cuenta que todo se vea correctamente para cada uno de ellos.

Sin embargo, hay ocasiones en las que no todo es posible de adaptar para todos los dispositivos y debemos ‘recortar’ para que todo siga conservando la calidad que le corresponde.

Uno de estos casos es cuando tenemos la necesidad de utilizar puntos suspensivos para delimitar un texto al ancho de nuestra capa. Para solucionar esto, podemos ayudarnos de CSS de una forma muy sencilla y rápida, gracias a las propiedades white-space, overflow y text-overflow.

Para conseguir este efecto, tan sólo hay que añadir en nuestro contenedor el siguiente código:

p {
   overflow:      hidden;
   white-space:   nowrap;
   text-overflow: ellipsis;
}

He de aclarar que el efecto se consigue cuando el texto sobrepasa al contenedor, por lo que tendrá un ancho menor al que ocupe el texto en cuestión.

¿Véis qué fácil?
Ahora os toca a vosotros; y no olvidéis dejarme vuestros comentarios.


Ismael Gutiérrez

Ingeniero Informático. Explotando mis capacidades personales y profesionales. Comprometido con la calidad. #RegulaciónYa #IngenieríaInformática

Deja un comentario