02

1

Evita el desbordamiento del texto con word-wrap

Una de las cosas que probablemente nos han pasado alguna vez ha sido que una palabra demasiado larga sobresale de un contenedor, quedando fatal, y con CSS3 podemos evitar este problema con word-wrap.
Esta función de CSS3 permite que una palabra que irremediablemente tiene que sobresalir se rompa y continúe en la línea de debajo.

La propiedad word-wrap admite dos modos, "normal", que se desbordaría el texto y es la opción por defecto y "break-word" que cortaría la palabra si fuese necesario.
También tenemos que tener en cuenta que puede que se corte sola una palabra según si tiene guiones (como explicaré más abajo) y nunca cortará una palabra si no es necesario, es decir, antes la bajará una línea.

1. .texto1{word-wrap: normal;} /* No se cortarán las palabras */
2. .texto2{word-wrap: break-word;} /* Se cortarán las palabras */

Puesta en marcha

Si tenemos un bloque muy estrecho y cabe la posibilidad de que contenga palabras largas es recomendable usar esta propiedad y evitaremos que se desborde o que directamente no aparezca la parte de la letra.

Y por último voy a usar guiones y símbolos para ver como se comportan con esta propiedad.