Estamos dando un repaso a las novedades que traerá la especificación CSS 3 y en este caso vamos a ver una propiedad interesante que servirá para que ciertas palabras que son demasiado largas y no caben en la anchura de una caja.

Como debemos saber, en el modelo de caja de los navegadores, las palabras se van colocando en líneas para ocupar toda la anchura disponible en la caja. Puede surgir un problema cuando tenemos una palabra muy larga, que no cabe en el ancho disponible del contenedor donde se ha colocado. Entonces lo que ocurre es que la palabra aparece por fuera de la caja, o incluso puede ocurrir que la caja se deforma de tamaño, haciendo que el elemento contenedor amplíe la anchura lo suficiente para que quepa la palabra. En cualquier caso, el efecto resultante suele ser poco agradable, porque muchas veces nos descuadra nuestro diseño y hace que las páginas queden mal maquetadas.

Para evitar este efecto, en CSS 3 se ha incluido un atributo llamado word-wrap que sirve para especificar que las palabras que sean demasiado largas se deben cortar, de manera que quepan en el ancho disponible de la caja. Una propiedad muy útil que seguro que pronto se comenzará a utilizarse habitualmente.

Alternativas overflow-wrap y word-wrap

ACTUALIZADO EN 2016: En el primer borrador de la especificación de CSS3 al atributo para la ruptura de palabras se le conocía como word-wrap, sin embargo, en más recientes borradores se alteró su nombre para overflow-wrap. El uso es exactamente el mismo, sin embargo ha surgido un problema de soporte que a día de hoy todavía se arrastra, puesto que navegadores entienden un atributo y otros entienden otro.

Por tanto, la recomendación hoy para nosotros sería usar overflow-wrap siempre, pero mantener el antiguo atributo word-wrap en el código CSS, a modo de fallback, para que todos los navegadores interpreten uno u otro.

El atributo overflow-wrap (o word-wrap) tiene dos posibles valores: normal o break-word.

overflow-wrap: normal;

Hace que las palabras no se corten, lo que sería el comportamiento normal que conocíamos hasta ahora, ocurriendo que las palabras largas nos puedan descuadrar nuestro diseño.

Ahora podemos ver una caja que tenía una anchura de 300 px y que por culpa de una palabra muy larga se deforma la caja o el texto aparece por fuera.

overflow-wrap: break-word;

Con este otro valor de overflow-wrap / word-wrap: break-word, lo que conseguimos es que la palabra se recorte, para caber en el ancho que habíamos definido.

Este atributo es actualmente soportado por todos los navegadores, tanto de ordenadores de escritorio como de móviles. Los navegadores de Microsoft Internet Explorer / Edge todavía soportan únicamente word-wrap, en octubre de 2016.

Ahora veamos una caja donde hemos colocado el atributo para que recorte las palabras: