Word-wrap en CSS 3

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.

Hemos de agradecer a Microsoft la incorporación de esta nueva propiedad de CSS 3, ya que el atributo word-wrap comenzó siendo una etiqueta no estándar de CSS, que estaba disponible en Internet Explorer y debido a su utilidad, el W3C se decidió a incorporarla a la nueva especificación de este lenguaje de estilo.

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

word-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.

word-wrap: break-word;

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

Este atributo por ahora es soportado por Internet Explorer, Safari y Google Chrome. Firefox parece que la incluirá a partir de su versión 3.1, que no ha sido lanzada todavía en el momento de escribir este artículo de desarrollo web .com.

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