Validación HTML: CSS: El valor "break-word" está obsoleto

Acerca de este problema de CSS

La propiedad word-break controla cómo se rompen las palabras cuando desborden su contenedor. Aunque break-word se usó históricamente como valor para esta propiedad, la especificación del Módulo de Texto CSS Nivel 3 lo ha marcado como obsoleto. Como explica la especificación:

Para compatibilidad con contenido heredado, la propiedad word-break también soporta una palabra clave obsoleta break-word. Cuando se especifica, esto tiene el mismo efecto que word-break: normal y overflow-wrap: anywhere, independientemente del valor real de la propiedad overflow-wrap.

Los navegadores aún soportan word-break: break-word para compatibilidad hacia atrás, pero depender de valores obsoletos es arriesgado. Las versiones futuras de navegadores pueden eliminar el soporte, y los validadores lo marcarán como un problema. El enfoque correcto es usar la propiedad overflow-wrap en su lugar, que está específicamente diseñada para controlar si y cómo se rompen las palabras cuando desbordan su contenedor.

Hay dos alternativas modernas a considerar:

overflow-wrap: break-word — permite al navegador romper una palabra normalmente irrompible en un punto arbitrario para prevenir el desbordamiento. La palabra solo se rompe si no puede caber en su propia línea. Esta es la opción más ampliamente soportada.
overflow-wrap: anywhere — funciona como break-word pero también permite que los fragmentos de palabras rotas sean considerados durante los cálculos de dimensionado min-content. Esto significa que los contenedores que usan anchos min-content o fit-content pueden encogerse más.

En la mayoría de casos, overflow-wrap: break-word es el reemplazo correcto.

Ejemplos

Uso obsoleto

Esto dispara el aviso de validación CSS del W3C:

<div style="word-break: break-word;">
  Estoestextoalargo_quenocontieneningunespacios_ydeberiarompersecorrectamente
</div>

Corregido con `overflow-wrap: break-word`

Esta es la solución más común y bien soportada:

<div style="word-break: normal; overflow-wrap: break-word;">
  Estoestextoalargo_quenocontieneningunespacios_ydeberiarompersecorrectamente
</div>

Corregido con `overflow-wrap: anywhere`

Usa esto si también quieres que el dimensionado min-content tenga en cuenta los fragmentos rotos:

<div style="word-break: normal; overflow-wrap: anywhere;">
  Estoestextoalargo_quenocontieneningunespacios_ydeberiarompersecorrectamente
</div>

En una hoja de estilos

Si el valor obsoleto aparece en un archivo CSS o bloque <style>, aplica la misma corrección:

<style>
  /* Obsoleto */
  /*
  .content {
    word-break: break-word;
  }
  */

  /* Correcto */
  .content {
    word-break: normal;
    overflow-wrap: break-word;
  }
</style>
<div class="content">
  Estoestextoalargo_quenocontieneningunespacios_ydeberiarompersecorrectamente
</div>

Entendiendo la diferencia entre valores de `overflow-wrap`

<style>
  .container {
    width: min-content;
    border: 1px solid black;
    margin-bottom: 1rem;
  }
  .wrap-break-word {
    overflow-wrap: break-word;
  }
  .wrap-anywhere {
    overflow-wrap: anywhere;
  }
</style>

<!-- Con break-word, el ancho min-content se basa en la palabra más larga -->

<div class="container wrap-break-word">
  Palabras cortas aquí pero_una_palabra_muy_larga_irrompible_también
</div>

<!-- Con anywhere, min-content puede encogerse más allá incluso de palabras largas -->

<div class="container wrap-anywhere">
  Palabras cortas aquí pero_una_palabra_muy_larga_irrompible_también
</div>

Con overflow-wrap: break-word, el ancho min-content del contenedor estará determinado por la cadena irrompible más larga. Con overflow-wrap: anywhere, incluso esa cadena larga puede romperse, permitiendo que el contenedor se encoja más. Para la mayoría de casos de uso donde simplemente quieres evitar que el texto desborde un contenedor de ancho fijo, overflow-wrap: break-word es la opción directa.