Propiedad word-wrap en CSS

En este post te mostraré a usar la propiedad word-wrap en CSS para romper palabras en un párrafo o texto.

Veremos los 3 métodos de word-wrap en CSS: break-all, normal y break-word.

¿Para qué sirve word-wrap en CSS?

Para romper las palabras si las mismas sobrepasan el ancho de su contenedor. Es decir, si la palabra rebasa el ancho de su contenedor, la misma se corta o rompe, y se muestra abajo, en la siguiente línea.

Formas de usar word-wrap

Simplemente se especifica en los estilos. Por ejemplo:

See the gist on github.

O directamente en el elemento:

See the gist on github.

normal

Esta forma es la que se usa por defecto para romper el texto o palabras.

break-all

Esta forma se utiliza cuando queremos romper el contenido en cualquier carácter, sin importar que la cadena quede truncada “a medias”

Por ejemplo, si escribimos “Hola mundo” y no cabe, tal vez se mostraría “Hola mu” y abajo “ndo”. Veremos más en el ejemplo.

Funciona bien para cuando agregamos estilos a texto que puede contener algo como un enlace o una palabra muy larga sin espacios.

break-word

Rompe el texto pero en una palabra, no en cualquier letra. Es decir, no corta palabras, sino que usa el espacio como delimitador.

Por ejemplo, si tenemos “Hola mundo” y no cabe, se dejaría “Hola” en una línea y “mundo” en otra

Ejemplo de word-wrap

Ahora veamos un ejemplo de uso de word-wrap. Para este caso puse el estilo dentro del elemento, pero bien se puede poner dentro de una hoja de estilos, separarlo por clases y todo eso.

See the gist on github.

He colocado el texto dentro de divs con anchura fija. También he colocado un enlace (para no tener palabras con espacios)

La salida es:

Vemos una diferencia entre break-word y break-all, pues en el primer ejemplo la palabra se corta en “visi” de “visitar” y en el segundo, como se sabe que no alcanzará el ancho del contenedor, se corta en “olvides”

Puedes probar el ejemplo aquí.

Más estilos

Además de los expuestos aquí, existe el modo inherit, initial y keep-all pero no son relevantes para esto.

Sin embargo, si quieres leer más sobre ello, puedes aprender más aquí.

Te invito a ver más sobre CSS o HTML en mi blog.