Como fazer múltiplas linhas de texto com o método .html()

Neste artigo você vai aprender a como fazer múltiplas linhas de texto com o método .html() de JavaScript, imprimindo em várias linhas

Fala programador(a), beleza? Bora aprender a imprimir várias linhas de texto com JavaScript e jQuery, utilizando o método html

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 114 aulas
• 4 projetos
• 9h 18min

Conhecer formação

Primeiramente é importante que você saiba que o JavaScript não permite a quebra de linha entre caracteres de uma string normal

JavaScript ao se deparar com estas instruções, vai ignorar e colocar a string junta da outra parte, mesmo que haja uma quebra de linha

Note que isso aqui não vai funcionar:

     $(".elemento").html("Testando" 
      +"Quebra"
      +"De"
      +"Linha");

Teremos a string sendo impressa normalmente, como se a quebra de linha não importasse

Então como podemos realizar a quebra de linhas?

Podemos adicionar um elemento que realiza a quebra de linha, como o <br>

Veja como ficaria o exemplo prático:

 $(".elemento").html("Testando" 
      +"<br> Quebra"
      +"<br> De"
      +"<br> Linha");

Desta maneira a quebra de linha será efetivada, pois o HTML vai renderizar esta tag

E então quebras de linha serão adicionadas entre a string, exibindo ela no elemento alvo em várias linhas diferentes

E então resolvemos o nosso problema =)

Conclusão

Neste artigo aprendemos a como imprimir múltiplas linhas de texto com o método .html()

Precisamos inserir tags que vão quebrar as linhas, desta maneira o HTML renderiza o elemento e faz o espaçamento correto

Isso por que o JavaScript ignora este tipo de espaço em branco da string, fazendo com que ele não seja impresso

Por isso precisamos inserir um elemento entre as tags para realizar esta ação

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube