Controlando a quebra de linha

Seja para criar um efeito estético ou evitar algum problema, tipo uma palavra viúva, aquela que sobra para outra linha no final de um parágrafo, é legal ter umas cartas na manga para dar aquela ajeita nos textos e nas quebras de linha. Ainda mais quando tratamos de partes chave do projeto, como a primeira coisa que vão ver no site que você está desenvolvendo, como é o caso da Hero Section¹.

Por exemplo, estamos criando um site que o texto da nossa Hero Section é "Vamos Jogar um Basquete". Os designers do nosso time pediram que a frase ocupe apenas uma linha em telas grandes o bastante, mas nas demais, o desejado é que ao quebrar, nunca a palavra "Basquete" fique sozinha na segunda linha.

Obviamente, podemos dar uma olhada como a frase fica disposta em vários tamanhos de tela e forçarmos a quebra de linha entre as palavras "jogar" e "um" com uma tag <br> e, para os tamanhos de tela, que cabem a frase toda, podemos usar media-queries² para esconder a quebra de linha.

<section class="hero">
  <h1> Vamos Jogar<br>um Basquete</h1>
  <button>Jogar</div>
</section>

Mas tem um jeito muito mais fácil e escrevendo muito menos! É utilizando o caracter especial Non-breaking space³, no HTML ele é invocado assim:  . Esse caractere funciona como um espaço, mas, no momento da quebra da linha, ele não vai ser considerado. É como se "Um Basquete" fosse uma palavra só sob a regra padrão de quebra de linha, na qual uma palavra é indivisível.

Codando nosso exemplo:

---

1. Geralmente, a primeira dobra (o que aparece no seu navegador assim que abre o site) da página inicial dos sites é chamada de Hero Section. A versão mais comum é uma imagem de fundo, um texto grande com o nome do produto e/ou um slogan e um botão convidando a se cadastrar, comprar o produto ou algo que seja do interesse do site em questão. ↩

2. https://developer.mozilla.org/pt-BR/docs/Web/CSS/Media_Queries/Using_media_queries ↩

3. https://en.wikipedia.org/wiki/Non-breaking_space ↩