<pre>: Elemento PRE
Última atualização: 2026-10-13
<pre>Elemento PRE
Texto pré-formatado que preserva espaços e quebras de linha em fonte monoespaçada; ideal para código ou poesia.
| Categoria | Conteúdo de Texto |
|---|---|
| Modelo de Conteúdo | Conteúdo de fluxo |
| Pais Permitidos | Qualquer elemento que aceite conteúdo de fluxo |
| Tag de Fechamento | Sim — requer fechamento </pre> tag |
| Status | Padrão |
📝 Sintaxe
<pre>preserva
a indentação e
as quebras de linha</pre>▶ Exemplo
Edite o código abaixo e veja o resultado em tempo real no playground:
🌐 Suporte de Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <pre> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os navegadores principais | |||||
Dica： O espaço em branco dentro de pre é mostrado como está — evite indentação extra; frequentemente combinado com code.
❓ Perguntas Frequentes
QQuebras de linha e espaços dentro de pre são preservados?
ASim, essa é a função central de
<pre>: espaços, quebras e indentação do código-fonte aparecem como estão (o navegador aplica white-space: pre por padrão). Por isso, no HTML-fonte do pre, escreva o conteúdo logo após a tag de abertura para não levar a indentação para a exibição.Qpre deve ser usado junto com code?
ACombinação recomendada:
<pre><code>código</code></pre> — o pre preserva o layout, o code declara a semântica «isto é código». Só com pre também exibe, mas leitores de tela e rastreadores não saberão que é código.QCódigo muito longo estoura o pre, o que fazer?
AControle a rolagem horizontal via CSS:
pre { overflow-x: auto; } — restrinja a largura do contêiner e a barra aparece. Evite white-space: pre-wrap para forçar a quebra — código quebrado no meio prejudica a leitura; rolar é o tratamento mais honesto.🏷️ Tags Relacionadas
💡 Casos Relacionados
Mais estudos de caso em breve — volte mais tarde.
📚 Tutoriais Relacionados
