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 isso a qualquer custo e fazem um grande esforço para evitá-los.

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.

Observação: text-wrap: pretty é diferente da propriedade orphans do CSS, que é relevante ao usar o layout de várias colunas do CSS. Além disso, pretty só processa páginas orfãs, não viúvas.

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á adequado à justificativa de texto. text-wrap: pretty serve, geralmente, para melhorar a quebra de linhas e a quebra de texto, atualmente focado em órfãos. No futuro, o text-wrap: pretty pode oferecer mais melhorias.

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. Eu 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ê.