Quebra de texto CSS: bastante

Ative o ajuste de texto otimizado para aumentar a beleza em vez da velocidade.

Adam Argyle
Adam Argyle

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

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

Viúvas e órfãos tipográficas são palavras únicas que aparecem sozinhas no final de um parágrafo ou bloco de texto. Viúvas são palavras sozinhas na parte superior de um bloco de texto e órfãos estão sozinhas no final de um bloco de texto. Eles podem interromper a maneira como nossos olhos leem o texto, tornando o conteúdo mais difícil de ler. Alguns designers evitam essas falhas a todo custo e fazem muito para evitá-las.

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

A partir do Chrome 117, os órfãos podem ser evitados 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 hifenização se linhas consecutivas aparecerem no final de um parágrafo ou as linhas anteriores para abrir espaço. Ela também será ajustada adequadamente à justificativa do texto. Em geral, text-wrap: pretty serve para melhorar o ajuste de linhas e a 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 bom ou ruim.
Imagem de Por que remover órfãos do corpo do texto.

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

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

Gostaríamos de ouvir outras melhorias ou sugestões de quebra de linha. Registre um problema no rastreador de bugs do Chromium com detalhes e exemplos de quebras de linha boas e ruins, e entraremos em contato com você.