Descripción
La propiedad word-wrap
en CSS se utiliza para especificar cómo se deben romper las líneas largas para ajustarse al contenedor. Esta propiedad es especialmente útil cuando se quiere evitar que el texto se desborde de su contenedor.
Esta propiedad se ha movido a ser overflow-wrap
, aunque ambas son soportadas.
Sintaxis
word-wrap : normal | break-word | anywhere
Definiciones de los valores
La propiedad word-wrap
acepta tres valores posibles:
- normal: Este es el valor predeterminado. No rompe las palabras a menos que sea absolutamente necesario, como cuando una palabra individual es demasiado larga para caber dentro de su cuadro contenedor.
- break-word: Este valor permite que las palabras que no se pueden romper se rompan en puntos arbitrarios si no hay puntos de interrupción aceptables en la línea, asegurando que no se desborden de su cuadro contenedor.
- anywhere: Este es un valor más reciente que permite que una línea se rompa en cualquier carácter para evitar desbordamientos, lo cual puede ser especialmente útil al tratar con largas cadenas continuas de texto.
Ejemplo
p {
word-wrap: break-word;
}
Este ejemplo establece la propiedad word-wrap
a break-word
para todos los párrafos, lo que significa que las palabras que son demasiado largas para caber en su contenedor se pueden romper en puntos arbitrarios para evitar desbordamientos.