Verificação HTML: CSS: O valor "break-word" está depreciado

Sobre este problema de CSS

A propriedade word-break controla como as palavras quebram quando transbordam do seu contentor. Embora break-word tenha sido historicamente usado como valor para esta propriedade, a especificação CSS Text Module Level 3 deprecou-o. Como a especificação explica:

Para compatibilidade com conteúdo legado, a propriedade word-break também suporta uma palavra-chave depreciada break-word. Quando especificada, isto tem o mesmo efeito que word-break: normal e overflow-wrap: anywhere, independentemente do valor real da propriedade overflow-wrap.

Os navegadores ainda suportam word-break: break-word para compatibilidade com versões anteriores, mas depender de valores depreciados é arriscado. Versões futuras dos navegadores podem remover o suporte, e os validadores irão sinalizar isto como um problema. A abordagem correta é usar a propriedade overflow-wrap em vez disso, que é especificamente desenhada para controlar se e como as palavras quebram quando transbordam do seu contentor.

Existem duas alternativas modernas a considerar:

overflow-wrap: break-word — permite ao navegador quebrar uma palavra que de outra forma seria inquebrantável num ponto arbitrário para prevenir o transbordo. A palavra só quebra se não conseguir caber na sua própria linha. Esta é a opção com maior suporte.
overflow-wrap: anywhere — funciona como break-word mas também permite que os fragmentos de palavra quebrada sejam considerados durante os cálculos de dimensionamento min-content. Isto significa que os contentores que usam larguras min-content ou fit-content podem encolher ainda mais.

Na maioria dos casos, overflow-wrap: break-word é a substituição adequada.

Exemplos

Uso depreciado

Isto despoleta o aviso de validação CSS do W3C:

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

Corrigido com `overflow-wrap: break-word`

Esta é a correção mais comum e bem suportada:

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

Corrigido com `overflow-wrap: anywhere`

Use isto se também quiser que o dimensionamento min-content tenha em conta os fragmentos quebrados:

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

Numa folha de estilos

Se o valor depreciado aparecer num ficheiro CSS ou bloco <style>, aplique a mesma correção:

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

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

Compreender a diferença entre os 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>

<!-- Com break-word, a largura min-content baseia-se na palavra mais longa -->

<div class="container wrap-break-word">
  Short words here but_a_very_long_unbreakable_word_too
</div>

<!-- Com anywhere, o min-content pode encolher mesmo além de palavras longas -->

<div class="container wrap-anywhere">
  Short words here but_a_very_long_unbreakable_word_too
</div>

Com overflow-wrap: break-word, a largura min-content do contentor será determinada pela string inquebrantável mais longa. Com overflow-wrap: anywhere, mesmo essa string longa pode ser quebrada, permitindo que o contentor encolha ainda mais. Para a maioria dos casos de uso onde você simplesmente quer prevenir que o texto transborde de um contentor de largura fixa, overflow-wrap: break-word é a escolha direta.