Quebra de texto CSS: bastante

Ative o ajuste de texto otimizado para oferecer beleza acima de velocidade.

Adam Argyle

No Chrome 117, é possível usar um novo recurso de ajuste de texto: text-wrap: pretty do nível de texto CSS 4.

p {
  text-wrap: pretty;
}

https://codepen.io/web-dot-dev/pen/yLGmzLJ

Viúvas e órfãos tipográficos são solteiros palavras que ficam sozinhas no final de um parágrafo ou bloco de texto. Viúvas são palavras sozinhos no topo de um bloco de texto e órfãos estão sozinhos no final de um texto bloco de recursos dependente. Eles podem interromper a forma como nossos olhos leem o texto, tornando o conteúdo mais difícil para ler. Alguns designers evitam isso a todo custo e se esforçam muito para evitá-los.

Imagem do Google Fonts—Widows & Órfãos

A partir do Chrome 117, é possível evitar os órfãos com uma linha de CSS: text-wrap: pretty.

Observação:o parâmetro text-wrap: pretty é diferente do Propriedade do orphans o que é relevante ao usar CSS com várias colunas layout. Além disso, pretty só lida com órfãos, não viúvas.

O recurso faz um pouco mais do que apenas garantir que os parágrafos não terminem com uma palavra, ela também ajusta a hifenização caso apareçam linhas com hífen consecutivas no final de um parágrafo ou ajusta as linhas anteriores para liberar espaço. Ela também ajustar corretamente a justificativa de texto. text-wrap: pretty é para em geral, melhor quebra de linhas e quebra de texto, atualmente focado em órfãos. No futuro, o text-wrap: pretty poderá oferecer mais melhorias.

Imagem extraída de Por que você deve remover órfãos do corpo do texto.

Há também o text-wrap: balance, que não evita órfãos, mas garante que o texto seja ajustado de forma a criar uma um bloco de texto harmonioso. Eu pessoalmente uso balance para títulos e pretty para e parágrafos.

Se você estiver interessado nos detalhes do algoritmo usado para determinar o número ideal de linhas ou considerações de desempenho, confira o link para o documento de design criado pelo engenheiro por trás do recurso, Koji Ishii.

Se você tiver outras sugestões ou melhorias de quebra de linha, gostaríamos de saber mais eles! Registre um problema no rastreador de bugs do Chromium com detalhes, exemplos de quebras de linha boas e ruins, e entraremos em contato com você.