Word-wrap en CSS 3. ¡Descubre cómo!

Una propiedad de CSS 3 que sirve para romper las palabras que son demasiado largas y no caben enteras por la anchura de una caja.

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.

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.

Este texto entra bien en la capa, pero ahora vamos a colocar una palabra demasiado larga que no cabrá, por lo que nos descuadraría el diseño: wieiisiddjasddjkjasdasdsadfdsfsdfsfsdfsdsdfsdfkaldkadadsadadadadsad. Esta capa tiene 300 píxeles de anchura y esa palabra, por tanto no cabía y me descuadra todo.

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:

Esta otra capa tiene el atributo word-wrap: break-word y por tanto va a recortar la siguiente palabra para que quepa bien en la caja: wieiisiddjasddjkjasdasdsadfdsfsdfsfsdfsdsdfsdfkaldkadadsadadadadsad. Ahora la capa no se ve afectada por una palabra tan larga.

Fuente:enlace