Quebra de texto CSS: bastante

Ativação da quebra de texto otimizada para priorizar a beleza em vez da velocidade.

Adam Argyle

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

p {
  text-wrap: pretty;
}
https://codepen.io/web-dot-dev/pen/yLGmzLJ

As viúvas e órfãos tipográficas são palavras únicas que ficam sozinhas no final de um parágrafo ou bloco de texto. Viúvas são palavras sozinhas na parte de cima de um bloco de texto, e órfãs são palavras sozinhas no final de um bloco de texto. Eles podem interromper a forma como nossos olhos leem o texto, dificultando a leitura do conteúdo. Alguns designers evitam esse tipo de problema a todo custo e fazem de tudo para evitar que ele aconteça.

Um parágrafo é mostrado com uma viúva no início e uma órfã no final, em comparação com o mesmo parágrafo sem as órfãs ou viúvas.
Imagem extraída de Google Fonts: Widows & Orphans

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

O recurso faz um pouco mais do que apenas garantir que os parágrafos não terminem com uma única palavra. Ele também ajusta a quebra se linhas hifenizadas aparecerem no final de um parágrafo ou ajusta linhas anteriores para abrir espaço. Ele também será ajustado adequadamente para justificação de texto. text-wrap: pretty é para melhor ajuste de linhas e quebra de texto, atualmente focado em órfãos. No futuro, o text-wrap: pretty pode oferecer mais melhorias.

Uma comparação de um parágrafo com órfãos e outro sem órfãos, cada um com um selo de ruim ou bom.
Imagem extraída de Por que você deve remover elementos órfãos do corpo do texto.

Há também o text-wrap: balance, que não impede órfãos, mas garante que o texto seja quebrado de uma maneira que crie um bloco de texto harmonioso. Pessoalmente, uso balance para títulos e pretty para parágrafos.

Se você tem interesse nos detalhes do algoritmo usado para determinar o número ideal de linhas ou nas considerações de desempenho, este é um 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, adoraríamos saber delas. Registre um problema no rastreador de falhas do Chromium com os detalhes, exemplos de quebras de linha boas e ruins, e entraremos em contato com você.