Propiedad CSS overflow-wrap
La propiedad CSS overflow-wrap especifica si se producirá un salto de línea en el cuadro de línea. Vea descripción, valores y ejemplos.
La propiedad overflow-wrap indica al navegador si está permitido romper una cadena normalmente irrompible —una palabra larga, una URL o un hash— en una nueva línea para que el texto no se desborde de su contenedor.
Normalmente, CSS solo inserta saltos de línea en las "oportunidades de ajuste suave", como espacios y guiones. Una cadena larga sin ninguno de esos caracteres (supercalifragilisticexpialidocious o https://example.com/a/very/long/path) no tiene dónde ajustarse, por lo que desborda su caja. overflow-wrap te permite autorizar un salto dentro de esa cadena como último recurso.
Cuándo usarlo
Usa overflow-wrap cuando el contenido sea generado por el usuario o impredecible — comentarios, consultas de búsqueda, direcciones de correo electrónico, enlaces, identificadores de código. Estas son exactamente las cadenas que no tienen puntos de ruptura naturales y pueden desbordar una columna de ancho fijo, una tarjeta o un elemento flex. Una regla defensiva habitual es:
.user-content {
overflow-wrap: break-word;
}Esto mantiene el diseño intacto sin afectar al texto normal, porque el salto solo se activa cuando una palabra de otro modo se desbordaría.
Valores de un vistazo
La propiedad overflow-wrap tiene tres valores significativos — normal, break-word y anywhere — además de las palabras clave CSS universales initial e inherit.
normal— el valor predeterminado. Las palabras se rompen solo en las oportunidades normales (espacios, guiones). Una palabra demasiado larga se desborda.break-word— una palabra larga se rompe en un punto arbitrario solo cuando de otro modo se desbordaría. De forma crucial, no reduce el ancho mínimo intrínseco del elemento, por lo que raramente altera el resto del diseño.anywhere— comobreak-word, pero la oportunidad de ruptura sí se cuenta cuando el navegador calcula el tamaño mínimo de contenido del elemento, de modo que un elemento flex o grid puede reducirse a un ancho menor que su palabra más larga.
overflow-wrap es el nombre estándar de la antigua propiedad word-wrap. word-wrap se mantiene como alias por compatibilidad con versiones anteriores — aceptan los mismos valores y se comportan de forma idéntica. Usa overflow-wrap en el código nuevo.
Overflow-wrap vs word-break
overflow-wrap y word-break influyen en los lugares donde pueden producirse saltos de línea, pero responden a preguntas diferentes.
overflow-wraprompe una palabra solo como último recurso, cuando de otro modo se desbordaría, independientemente del idioma.word-breakcontrola los saltos de forma proactiva. Está diseñado principalmente para idiomas CJK (chino, japonés, coreano), donde los saltos entre caracteres son normales, y su valorbreak-allromperá las palabras latinas a nivel de carácter incluso cuando habrían cabido.
Regla general: usa overflow-wrap: break-word para evitar el desbordamiento sin cambiar el ajuste normal; usa word-break: break-all solo cuando realmente quieras un salto agresivo a nivel de carácter.
Para romper palabras en los límites de sílabas significativos con un guion, consulta la propiedad hyphens, y para controlar el espacio en blanco y el ajuste en general, consulta white-space.
Resumen de la propiedad
| Valor inicial | normal |
|---|---|
| Se aplica a | Todos los elementos. |
| Heredada | Sí. |
| Animable | No. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.overflowWrap = "normal"; |
Sintaxis
Sintaxis CSS de overflow-wrap
overflow-wrap: normal | anywhere | break-word | initial | inherit;Ten en cuenta que el orden de los valores de palabra clave importa en las declaraciones de forma abreviada, pero para overflow-wrap simplemente se establece un valor a la vez.
Ejemplo de la propiedad overflow-wrap
Cada párrafo a continuación está limitado a 200px. La cadena larga dummydummy… no tiene espacios, por lo que con normal se desborda, mientras que break-word y anywhere la fuerzan a ajustarse dentro de la caja.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
width: 200px;
margin: 3px;
background: #ccc;
}
.anywhere {
overflow-wrap: anywhere;
}
.break-word {
overflow-wrap: break-word;
}
.normal {
overflow-wrap: normal;
}
</style>
</head>
<body>
<h2>Overflow-wrap property example</h2>
<h3>Overflow-wrap: normal</h3>
<p>Lorem Ipsum has been the industry's standard <em class="normal"> dummydummydummydummydummydummydummydummy</em> text ever since the 1500s...
</p>
<h3>Overflow-wrap: anywhere</h3>
<p>Lorem Ipsum has been the industry's standard <em class="anywhere">dummydummydummydummydummydummydummydummy </em> text ever since the 1500s...
</p>
<h3>Overflow-wrap: break-word</h3>
<p>Lorem Ipsum has been the industry's standard <em class="break-word">dummydummydummydummydummydummydummydummy </em> text ever since the 1500s...
</p>
</body>
</html>Valores
| Valor | Descripción |
|---|---|
| normal | Las líneas solo se romperán según las reglas normales de salto de línea. Las palabras no se romperán aunque se desborden del contenedor. Este es el valor predeterminado de esta propiedad. |
| anywhere | Las palabras largas o URL se romperán en cualquier punto si no hay otros puntos de ruptura aceptables en la línea. Los caracteres de separación silábica no se consideran puntos de ruptura aceptables, incluso si la propiedad hyphens está configurada. |
| break-word | Las palabras largas o cadenas que no caben dentro de su contenedor se romperán en un punto arbitrario para forzar un salto de línea. Las oportunidades de ajuste suave no se tienen en cuenta al calcular el tamaño mínimo de contenido del elemento. |
| initial | Hace que la propiedad use su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |