Evita el desbordamiento de un contenedor con word-wrap

En alguna ocasión puede que se nos haya dado este problema: tenemos una caja contenedora y en ella escribimos texto. Si el texto es demasiado largo, nos desborda la caja con el consiguiente resultado poco estético:

word-wrap-1

Si queremos ocultar este desbordamiento no nos servirá utilizar la etiqueta overflow, ya que no queremos ocultar el desbordamiento:

word-wrap-2

Lo que queremos es que automáticamente se corte la palabra cuando alcance al medida máxima del contenedor. Para ello podemos utilizar word-wrap, una de las muchas novedades que incorporó CSS3.

La propiedad word-wrap tiene dos posibles valores normal (por defecto) y break-word, que posibilita el corte de una palabra. Añadiendo word-wrap:break-word a nuestro div contenedor, obtendremos el efecto deseado:

word-wrap-3

 

Facebooktwittergoogle_plus