Quando usar em vez de ?

Use quando a quebra de linha faz parte do próprio conteúdo, como num endereço ou num poema. Use elementos separados para parágrafos separados, e margin no CSS para o espaçamento, em vez de empilhar tags .

Docs executáveis de HTML: Quebra de linha

Q: Como fazer uma quebra de linha no HTML?

Coloque onde a linha nova deve começar: Line one Line two. Apertar Enter no arquivo HTML não funciona, porque os navegadores tratam as quebras de linha do código como espaços comuns.

Q: Devo escrever , ou ?

As três formas funcionam no HTML e geram o mesmo elemento. é a forma HTML pura; as versões com barra são aceitas por compatibilidade com XHTML e JSX. sozinho é inválido, embora os navegadores o leiam como mais uma quebra de linha.

Q: Como manter as quebras de linha de um texto sem adicionar tags ?

Dê ao elemento white-space: pre-line no CSS. O navegador passa a mostrar cada quebra de linha do texto como uma quebra real, e continua juntando os espaços extras. Isso é útil para comentários de usuários e textos carregados com JavaScript.

Q: Como evitar uma quebra de linha no HTML?

Envolva o texto num elemento com white-space: nowrap, ou junte duas palavras com um espaço não separável para que fiquem sempre na mesma linha.

Quebra de linha em HTML: a tag br e onde a linha quebra

Use para começar uma linha nova dentro de um bloco de texto. Veja quando é a escolha certa e quando um parágrafo é melhor, como manter as quebras do seu texto, como deixar palavras longas quebrarem com e como impedir que uma linha quebre.

Esta página tem editores executáveis - edite, execute e veja a saída na hora.

Por Kevin Spektor, Co-founder & CTO

Publicado em Sep 24, 2026

Como fazer uma quebra de linha

Coloque   onde você quer que a linha nova comece. É um elemento vazio, então não tem tag de fechamento:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Line break</title>
</head>
<body>
  <p>
    Coddy Ltd.<br>
    12 Market Street<br>
    Springfield
  </p>
  <p>Pressing Enter in the source
     does not break the line.</p>
</body>
</html>

O endereço quebra exatamente em cada  . O segundo parágrafo fica numa linha só, mesmo que o código tenha uma quebra de linha: o HTML trata quebras de linha, tabs e sequências de espaços como um único espaço. É por isso que   existe.

 ,   e   geram o mesmo elemento. Use a forma que o seu projeto usa (JSX e XHTML exigem a barra).

br vs p: quebra não é espaçamento

Um   termina uma linha dentro do mesmo parágrafo. Um  novo começa um novo parágrafo, com espaço acima e abaixo vindo das margens padrão. Empilhar tags   para criar espaço funciona, mas é frágil e diz a coisa errada:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>br vs p</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .box { border: 2px solid #e5e7eb; padding: 0 12px; margin-bottom: 12px; }
    .spaced p { margin: 0 0 24px; }
  </style>
</head>
<body>
  <div class="box">
    <p>With br tags:<br><br><br>Second paragraph?</p>
  </div>
  <div class="box spaced">
    <p>With two paragraphs and CSS margin:</p>
    <p>Second paragraph.</p>
  </div>
</body>
</html>

As duas caixas parecem parecidas, mas a primeira é um único parágrafo para o leitor de tela, e mudar o espaçamento significa editar cada página. Na segunda, o espaço é uma linha de CSS.

Bons usos de  : endereços, poemas e letras de música, e linhas de uma assinatura, onde a quebra pertence ao texto. Para todo o resto, use parágrafos, listas ou títulos.

Mantendo as quebras de linha do seu texto

Quando o texto vem de outro lugar (uma caixa de comentário, um banco de dados, um script), ele tem caracteres de quebra de linha reais em vez de tags  . O CSS white-space: pre-line faz o navegador exibir essas quebras como quebras de linha:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>pre-line</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .msg { border: 2px solid #e5e7eb; padding: 8px 12px; margin-bottom: 8px; }
    .keep { white-space: pre-line; border-color: #2563eb; }
  </style>
</head>
<body>
  <div class="msg" id="a"></div>
  <div class="msg keep" id="b"></div>
  <script>
    const text = 'Hi team,\nThe build is fixed.\nThanks!';
    document.getElementById('a').textContent = text;
    document.getElementById('b').textContent = text;
  </script>
</body>
</html>

A mesma string aparece numa linha na caixa cinza e em três linhas na azul. Isso também é mais seguro que montar tags   dentro do texto do usuário com innerHTML, o que permitiria que usuários injetassem HTML. Para manter também os espaços e a indentação, use white-space: pre, explicado na página de espaço em HTML.

Deixando palavras longas quebrarem: wbr

Uma palavra ou URL longa sem espaços pode transbordar de uma caixa estreita.  marca um ponto onde o navegador pode quebrar a linha se precisar, e não faz nada caso contrário:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>wbr</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .narrow { width: 160px; border: 2px solid #f59e0b; padding: 4px; margin-bottom: 12px; }
  </style>
</head>
<body>
  <div class="narrow">example.com/docs/html/line-break-tag</div>
  <div class="narrow">example.com/<wbr>docs/<wbr>html/<wbr>line-break-tag</div>
</body>
</html>

O primeiro caminho sai da caixa; o segundo quebra nos pontos de . Para texto que você não controla, a propriedade CSS overflow-wrap: anywhere quebra palavras longas em qualquer ponto.

Impedindo uma linha de quebrar

Às vezes você quer o contrário: manter "10 km" ou um número de telefone juntos. Duas ferramentas:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>No break</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .narrow { width: 170px; border: 2px solid #16a34a; padding: 4px; }
    .nowrap { white-space: nowrap; }
  </style>
</head>
<body>
  <p class="narrow">The race is exactly 10&nbsp;km long, call <span class="nowrap">+1 555 0100</span> to join.</p>
</body>
</html>

  é um espaço em que o navegador não quebra a linha, então "10" e "km" ficam juntos. white-space: nowrap mantém um span inteiro numa linha. Troque   por um espaço normal, ou remova a classe, e nessa largura os dois se dividem em duas linhas.

Erros comuns

Apertar Enter no código e esperar uma linha nova. Quebras de linha no HTML são espaços. Use  , elementos separados ou white-space: pre-line.
Empilhar   para dar espaço. Use parágrafos e margin.
Usar   para montar uma lista. Use <ul> ou <ol> com <li>, que os leitores de tela anunciam como lista.
Escrever . Não é válido. Escreva  .
Adicionar   ao texto do usuário com innerHTML. Defina textContent e use white-space: pre-line.

Perguntas frequentes

Como fazer uma quebra de linha no HTML?

Coloque   onde a linha nova deve começar: Line one Line two. Apertar Enter no arquivo HTML não funciona, porque os navegadores tratam as quebras de linha do código como espaços comuns.

Devo escrever , ou ?

As três formas funcionam no HTML e geram o mesmo elemento.   é a forma HTML pura; as versões com barra são aceitas por compatibilidade com XHTML e JSX.  sozinho é inválido, embora os navegadores o leiam como mais uma quebra de linha.

Quando usar em vez de ?

Use   quando a quebra de linha faz parte do próprio conteúdo, como num endereço ou num poema. Use elementos  separados para parágrafos separados, e margin no CSS para o espaçamento, em vez de empilhar tags  .

Como manter as quebras de linha de um texto sem adicionar tags ?

Dê ao elemento white-space: pre-line no CSS. O navegador passa a mostrar cada quebra de linha do texto como uma quebra real, e continua juntando os espaços extras. Isso é útil para comentários de usuários e textos carregados com JavaScript.

Como evitar uma quebra de linha no HTML?

Envolva o texto num elemento com white-space: nowrap, ou junte duas palavras com um espaço não separável   para que fiquem sempre na mesma linha.

Conceitos relacionados