Como quebrar linha no alert de JavaScript

Neste artigo você vai aprender a como quebrar linha no alert de JavaScript, ou seja, a função alert que exibe uma mensagem

Pra quebrar linha no alert de JavaScript, use a sequência de escape \n dentro da string:

alert("Primeira linha\nSegunda linha");

O alert exibe texto simples e não interpreta HTML, então tag como <br> não quebra linha ali

Se você usar template literal (crase), dá pra quebrar a linha direto no código, sem o \n, porque a quebra digitada entra na string

Fala programador(a), beleza? Bora aprender mais sobre o alert de JavaScript!

A função alert recebe um texto e o imprime na tela com uma espécie de modal

O usuário só consegue prosseguir, se fechar o alert

Logo, não há muitos recursos para a quebra de linha, então vamos utilizar um caractere especial

O \n tem como função realizar uma quebra de linha em uma string

Veja então o código necessário:

alert("Primeira linha \n Segunda linha");

Desta maneira cada frase fica em uma linha

Resolvendo assim o nosso problema! 🙂

Note que os caracteres especiais são muitos, e eles funcionam em qualquer tipo de string

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Conclusão

No artigo de hoje você viu como quebrar linha no alert em JavaScript

Utilizamos a função alert com o símbolo \n para pular a linha

Este caractere especial faz a quebra de linhas nos textos

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias! Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias. O link acima contém um cupom de desconto para os cursos

Por que o <br> não funciona no alert:

Essa é a dúvida que aparece logo depois do primeiro teste

O alert mostra uma caixa de diálogo com texto simples e um botão de confirmação

E aí vem o pulo do gato: ele não interpreta HTML

Ou seja, jogar um <br> no meio da mensagem não gera quebra de linha nenhuma

Por isso o caminho é o caractere especial de escape, o \n, que age dentro da própria string e não depende do HTML da página

Dá pra quebrar linha sem o \n? Template literal:

Dá sim, e fica bem mais legível quando a mensagem é grande

Se você já usou template literal (aquela string com crase em vez de aspas), a lógica é a mesma de sempre

Dentro das crases a quebra de linha que você digita no código FAZ PARTE da string

Então você escreve a mensagem já quebradinha e nem precisa do \n:

alert(`Primeira linha
Segunda linha`);

Já com aspas simples ou duplas isso não rola: a quebra literal não é permitida nesse tipo de string, e aí o \n é obrigatório

Os dois jeitos entregam o mesmo resultado, escolhe o que deixa teu código mais limpo 🙂

Meu alert não aparece, e agora?

Tome cuidado com dois cenários clássicos, porque aqui o problema não é a quebra de linha

O primeiro: quando a página dispara vários alerts em sequência, o navegador oferece ao usuário a opção de impedir que aquela página crie diálogos adicionais

Marcou isso, os próximos alerts simplesmente não aparecem mais

O segundo: dentro de um iframe com o atributo sandbox, as chamadas de window.alert(), window.confirm(), window.prompt() e window.print() são bloqueadas por padrão

Pra liberar, o sandbox precisa da palavra-chave allow-modals

Caso este erro apareça no console, é esse o caso:

Ignored call to alert(). The document is sandboxed, and the allow-modals keyword is not set.

Se você tá testando teu código dentro de um editor online que roda o preview em iframe, se liga nisso antes de achar que o \n quebrou

E se eu quiser algo melhor que o alert? O <dialog>:

Vale saber que o alert é modal e bloqueante: trava o acesso ao resto da interface até o usuário fechar

A própria documentação recomenda não abusar de funções que criam caixas modais

A alternativa nativa hoje é o elemento HTML <dialog>

Ele tem show(), showModal(), close(), o pseudo-elemento ::backdrop pro fundo e os eventos close e cancel

E a quebra de linha ali é a que você já conhece, porque o conteúdo é HTML de verdade, então você monta com as tags que quiser

Suporte: Chrome 37+, Edge 79+, Firefox 98+ e Safari 15.4+ (Internet Explorer e Opera Mini ficam de fora)

O alert continua útil pra um teste rápido, um debug, uma mensagem boba

Pra interface de verdade, o <dialog> é o caminho

O alert vai deixar de existir?

Existe uma discussão aberta no padrão HTML (a issue #2894 do WHATWG) sobre depreciar alert(), confirm() e prompt()

E navegadores baseados em Chromium já bloqueiam esses diálogos dentro de handlers de unload

Teve até um episódio famoso: em 2021 o Chrome começou, na versão 92, a remover alert(), confirm() e prompt() em iframes de origem cruzada

Mas voltou atrás depois de quebrar sites legítimos, o CodePen entre eles

Moral da história: pra script rápido e estudo, o \n no alert resolve numa boa

Pra produção, já vale olhar pro <dialog>