CSS: text-wrap para equilibrar títulos

Tem tanta coisa possível no CSS hoje que já considero uma “obra aberta” — impossível conhecer tudo, sempre nos presenteando com pequenas pérolas.

Descobri o text-wrap: balance, que distribui as palavras dentro de um elemento de modo a deixá-las… equilibradas. É indicado para títulos (h1, h2 etc.) e blocos curtos — cada navegador impõe uma limitação de linhas em que isso funciona.

Apliquei aos títulos do Órbita. (Exemplo.)

Existe também o text-wrap: pretty, que parte do mesmo princípio do balance, porém menos rigoroso e, por isso, indicado para blocos de textos maiores, como parágrafos (p) e listas (li). O suporte ainda é limitado (só nos navegadores baseados no Chromium), mas isso deve mudar com o tempo.

Eu jamais teria pensado nisso. Mais informações no MDN.

Dica extra. Para impedir que dois elementos que não podem ser separados não o sejam por uma quebra de linha (valores, tipo R$ 10), use um caracter invisível ( ) em vez de espaço, assim: R$ 10.