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 Section1.
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-queries2 para esconder a quebra de linha.
1<section class="hero">2 <h1> Vamos Jogar<br>um Basquete</h1>3 <button>Jogar</div>4</section>Mas tem um jeito muito mais fácil e escrevendo muito menos! É utilizando o caracter especial Non-breaking space3, 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: