Word-wrap y overflow-wrap en CSS 3

  • Por
  • CSS
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. Atributos word-wrap y overflow-wrap.

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.

Nota: 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.

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.

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

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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Mario Juárez

17/2/2009
Hola, solo quiero comentar 2 cosas:

1. Eso de agradecer a Microsoft no me parece bueno, ya que gracias a Microsoft muchos desarrolladores web tenemos problemas para poder seguir los standard, tanto de CSS, XHTML, Javascript, de todos modos tarde o temprano a alguien se le hubiera ocurrido esta propiedad.

2. Con estos articulos de CSS deberías de utilizar imagenes para mostrar los ejemplos , no toda la gente ocupa varios navegadores, para poder visualizar esete efecto.

Saludos desde El Salvador.

Luciano

18/2/2009
a mi se me ven los dos iguales.
utilizo firefox 3.0.6

Fernando

18/2/2009
Opino igual que Mario Juárez. Uso un Mac con Firefox y lo veo igual. Y por cierto a Microsoft a ver si entre todos dejamos de usar su explorer hasta que se decidan de verdad a seguir los standars, es muy triste tener que estar todo el dia programando dos veces las cosas por su ineptitud. Era jugar sucio para ser el navegador mayoritario, ahora con alternativas perfectamente válidas que se dejen ya de entorpecer a los usuarios.

hugo

18/2/2009
En firefox sigue sin corregirse el problema

Sistema

23/2/2009
Saludos:

Ver que jala bien el internet explorer pero con firefox sigo obteniendo el mismo problema, alguna idea???

Carlos

24/4/2009
Solucion wordwrad para firefox (y todos los navegadores en general)
En este articulo muestra la funcion javascript que se encarga del maldito problema del wordwrap en firefox

http://elmicoxcodes.blogspot.com/2007/02/word-wrap-in-firefox.html

Cotelandia

07/2/2012
...
En firefox se ve bien