Propiedad CSS overflow-wrap

La propiedad overflow-wrap se usa para especificar si el navegador puede romper líneas dentro de una cadena inquebrantable, evitando así que el contenido desborde.

La propiedad overflow-wrap tiene tres valores principales: normal, break-word y anywhere. También admite las palabras clave universales de CSS initial e inherit.

INFO

El nombre overflow-wrap se considera el nombre estándar de la propiedad word-wrap.

Overflow-wrap frente a Word-break

Aunque overflow-wrap y word-break se comportan de forma similar, existen diferencias entre ellas. La propiedad overflow-wrap rompe una palabra si no puede colocarse en la línea sin desbordarse, independientemente del idioma utilizado. La propiedad word-break se usa principalmente para idiomas CJK (chino, japonés y coreano) para especificar dónde pueden producirse saltos de línea entre caracteres, pero también proporciona reglas de ruptura estrictas para texto no CJK.

Las propiedades word-wrap y overflow-wrap

La propiedad word-wrap acepta los mismos valores que overflow-wrap. Estas propiedades se comportan de forma similar.

Initial Value	normal
Applies to	All elements.
Inherited	Yes.
Animatable	No.
Version	CSS3
DOM Syntax	object.style.overflowWrap = "normal";

Sintaxis

Sintaxis de CSS overflow-wrap

css

overflow-wrap: normal | anywhere | break-word | initial | inherit;

Ejemplo de la propiedad overflow-wrap:

Ejemplo de código CSS overflow-wrap

html

<!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>

Try it Yourself »

Valores

Value	Description
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 desborden el contenedor. Este es el valor predeterminado de esta propiedad.
anywhere	Las palabras largas o las URL se romperán en cualquier punto si no hay puntos de ruptura aceptables en la línea. Los caracteres de separación por guion no se consideran puntos de ruptura aceptables, incluso si la propiedad `hyphens` está establecida.
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 del contenido del elemento.
initial	Hace que la propiedad use su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Cuál es la función de la propiedad CSS 'overflow-wrap'?

Determina cómo se indica al usuario el contenido desbordado que no es visibleEspecifica si el navegador debe romper líneas dentro de las palabras para evitar el desbordamientoControla el comportamiento de la propiedad 'break-inside'Define cómo se maneja el contenido adicional, yendo en la dirección opuesta a la escrituraEstablece dónde debe ocurrir un salto de página o de columna

Propiedad CSS overflow-wrap ​

Overflow-wrap frente a Word-break ​

Las propiedades word-wrap y overflow-wrap ​

Sintaxis ​

Ejemplo de la propiedad overflow-wrap: ​

Valores ​