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.
<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 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:
-
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. ↩
-
https://developer.mozilla.org/pt-BR/docs/Web/CSS/Media_Queries/Using_media_queries ↩
Top comments (0)