Ative o ajuste de texto otimizado para oferecer beleza acima de velocidade.
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;
}
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.
A partir do Chrome 117, é possível evitar os ó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
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.
![Uma comparação de um parágrafo com órfãos e outro sem órfãos, cada um com um selo de bom ou ruim.](https://developer.chrome.google.cn/static/blog/css-text-wrap-pretty/image/a-comparison-a-paragraph-8806ede4d3829.png?authuser=9&hl=pt)
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ê.