DEV Community

Cover image for Controlando a quebra de linha
Giovani Sousa
Giovani Sousa

Posted on • Originally published at giovanisleite.dev

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 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>
Enter fullscreen mode Exit fullscreen mode

Mas tem um jeito muito mais fácil e escrevendo muito menos! É utilizando o caracter especial Non-breaking space3, no HTML ele é invocado assim: &nbsp;. 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 

Top comments (0)