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:
Si queremos ocultar este desbordamiento no nos servirá utilizar la etiqueta overflow, ya que no queremos ocultar el desbordamiento:
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:
