20.03.2025

Quebra de Texto Dentro da Tag <pre> em HTML Sem Barras de Rolagem

Resposta Rápida

Para habilitar a quebra de texto em um elemento <pre>, defina a propriedade CSS white-space como pre-wrap:

pre { white-space: pre-wrap; }

Alternativamente, você pode especificar isso diretamente em seu HTML:

<pre style="white-space: pre-wrap;">Aqui está seu texto...</pre>

Essa abordagem preserva espaços e quebras de linha enquanto envolve o texto de acordo com os limites do contêiner.

Garantindo Compatibilidade Entre Navegadores

pre-wrap funciona bem na maioria dos navegadores modernos, mas algumas versões mais antigas podem exigir configurações adicionais.

• Mozilla: Para versões mais antigas do Mozilla, use -moz-pre-wrap;.
• Opera: Para versões até 6, especifique -pre-wrap;, e para a versão 7 e superiores, use -o-pre-wrap;.
• Internet Explorer: A partir da versão 5.5, use word-wrap: break-word; para uma quebra correta.

Para garantir suporte em todos os navegadores, adicione:

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  -moz-pre-wrap: pre-wrap;
  -o-pre-wrap: pre-wrap;
}

Evitando Quebras Indesejadas Dentro de Palavras

Para evitar quebras de palavras ao envolver texto em um <pre>, aplique word-break: keep-all;.

Exemplo de implementação em CSS:

pre {
  white-space: pre-wrap;
  word-break: keep-all;
}

Visualização

Vamos considerar um exemplo de quebra de texto:

Imagine uma rua estreita (este será o nosso elemento `<pre>`) e uma coluna (seu texto) descendo por ela.

Sem quebra:

🛣️[🥁🎺🎷🎸🎻...🏁] // Os músicos não cabem na largura da rua!

Com quebra:

<pre style="white-space: pre-wrap;">
🛣️[🥁🎺🎷🎸
🎻...🏁] // Todos os músicos estão organizadamente na rua!
</pre>

Ilustração do efeito:

Sem quebra:      🛣️🥁🎺🎷🎸🎻...🏁🌳(onde eles foram?)
Com quebra:      🛣️🥁🎺 🎷
                 🎸🎻...🏁 👏

A propriedade white-space: pre-wrap; permite ajustar todo o texto dentro do contêiner.

Substituindo <pre> por <div> para Evitar Rolagem Horizontal

Ao substituir <pre> por <div>, você pode eliminar a rolagem horizontal enquanto mantém a formatação:

<div style="white-space: pre-wrap; font-family: monospace;">
  Texto formatado sem rolagem...
</div>

Essa abordagem preserva a formatação, oferecendo melhor controle sobre o layout.

Criando uma Classe Separada para Maior Flexibilidade

Se seu site tiver vários elementos <pre> com estilos variados, uma classe CSS personalizada pode simplificar o gerenciamento:

.prettyprint-override {
   white-space: pre-wrap;
   word-wrap: break-word;
   word-break: keep-all;
}

Aplique essa classe aos seus elementos <pre>:

<pre class="prettyprint-override">Aqui está seu texto...</pre>

Apoio à Legibilidade Durante a Quebra

Ao utilizar white-space: pre-wrap; junto com word-break: keep-all;, você pode alcançar quebras de texto agradáveis e legíveis:

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: keep-all;
}

Recursos Úteis

1. Faça o Texto "Pre" Quebrar | CSS-Tricks — um guia detalhado sobre quebra de texto no CSS-Tricks.
2. <pre>: O Elemento de Texto Pré-formatado - HTML | MDN — tudo sobre <pre> no MDN.
3. html - Como quebrar texto dentro de uma tag pre? - Stack Overflow — discussão sobre quebra de texto em <pre> no Stack Overflow.
4. Tag pre em HTML — um guia para o elemento <pre> do W3Schools.
5. Exemplo php://input - PHP - Fóruns SitePoint — usando quebra de texto em links, discutido no fórum SitePoint.
6. Blog de Design para Web | WDD — segredos da quebra de código em HTML do Webdesigner Depot.

Video

Navigation