HTML pre: preservar espaços e quebrar linhas longas

HTML <pre> marca uma região de texto pré-formatado que preserva espaços e quebras de linha. Combine-o com <code> para código-fonte, e use CSS white-space: pre-wrap quando linhas longas devem quebrar para a largura disponível.

Diferença Entre pre e Parágrafos Regulares

Parágrafos regulares combinam espaços consecutivos e quebras de linha na fonte de acordo com o CSS padrão. A tag pre mantém esse espaçamento por padrão, tornando-a adequada para código com indentação, logs e textos onde o espaçamento consistente é importante. A fonte padrão geralmente é monoespaçada, mas as fontes e o manejo de espaço podem ser alterados com CSS.

Você pode alinhar visuais semelhantes a tabelas usando espaços, mas isso não fornece as reais relações de linhas e colunas de uma tabela. Use a tag table para dados comparativos e, ao transmitir significado com espaçamento como arte ASCII, forneça explicações que possam ser compreendidas por leitores de tela.

Exemplo Completo: Preservando Espaços e Lidando com Linhas Longas

Salve o seguinte documento como pre-demo.html e abra-o em um navegador. Salve o arquivo em UTF-8, e nenhuma biblioteca externa é necessária. A rolagem horizontal e a quebra de palavras foram aplicadas separadamente à mesma string longa.

<!doctype html>
<html lang="pt">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparar espaços e quebras de linha com pre</title>
  <style>
    body { max-width: 40rem; margin: 1rem auto; padding: 0 1rem; }
    pre { padding: 1rem; background: #eef2f4; }
    .scroll { overflow-x: auto; }
    .wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Espaços e quebras de linha</h1>
  <p>one    two
    three</p>
  <pre>one    two
    three</pre>
  <h2>Rolagem horizontal</h2>
  <pre class="scroll"><code>path/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</code></pre>
  <h2>Quebra de linha</h2>
  <pre class="wrap"><code>path/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</code></pre>
  <h2>Exibir código-fonte HTML</h2>
  <pre class="scroll"><code>&lt;p&gt;Hello &amp; welcome&lt;/p&gt;</code></pre>
</body>
</html>

O primeiro parágrafo se funde em uma linha de acordo com o manuseio padrão de espaços, e o pre seguinte preserva os quatro espaços entre as palavras one e two e os quatro espaços antes da palavra three. Quando a tela é estreitada, o exemplo de rolagem ganha barra de rolagem horizontal, e o exemplo de quebra divide até palavras longas na linha seguinte. Na área de exibição do código-fonte HTML, <p>Hello & welcome</p> aparece como texto na forma de tag.

HTML dentro de pre também é interpretado.

Pre não é um elemento que impede a interpretação de HTML. Se você escrever uma tag <strong> real dentro dele, o significado da tag será aplicado. Para exibir o código-fonte HTML como texto, escape < para < e & para &. O último exemplo de todo o documento acima usa esse princípio.

A primeira quebra de linha imediatamente após a tag de início do pre é removida pelo analisador HTML. As quebras de linha subsequentes e a indentação no código são preservadas, então verifique a posição inicial real do texto para garantir que os espaços para alinhamento do documento não apareçam na tela. Ao exibir o código dinamicamente, você pode inserir a string usando textContent em vez de innerHTML para evitar que seja interpretada como tags.

Coisas para verificar quando a quebra automática de linha não ocorre

Se você apenas especificar overflow-wrap e mantiver o padrão white-space: pre, as quebras de linha desejadas podem não aparecer. Para preservar espaços e quebras de linha ao quebrar as linhas na borda da tela, aplique pre-wrap, e para dividir strings longas sem espaços, também especifique overflow-wrap. Por outro lado, se você precisar manter uma estrutura de linha única para o código, mantenha pre e forneça rolagem interna com overflow-x: auto.

pre preserva o layout do texto, e code indica que o conteúdo é código. Usar ambos juntos não gera automaticamente colorização de sintaxe, sendo necessário um realçador ou CSS separado. Em vez de depender das antigos atributos width e wrap, ajuste a exibição com CSS. Para condições detalhadas, consulte as definições de pre no padrão padrão HTML: elemento pre e no documento pre referência de pre na MDN.