Você sabe como usar texto pré-formatado? Quando você adiciona texto ao código HTML de uma página da Web, digamos em um elemento de parágrafo, você tem pouco ou nenhum controle sobre onde essas linhas de texto serão quebradas ou o espaçamento que será usado.
Isso ocorre porque o navegador da web fluirá o texto conforme necessário com base na área que o contém. Isso inclui sites responsivos que terão um layout muito fluido que muda de acordo com o tamanho da tela que está sendo usada para visualizar a página.
O texto HTML quebrará uma linha onde for necessário, uma vez que atingiu o final de sua área contida. No final, o navegador desempenha um papel mais importante na determinação de como o texto é quebrado do que você.
Em termos de adição de espaçamento para criar um determinado formato ou layout, o HTML não reconhece o espaçamento adicionado ao código, incluindo barra de espaço, tabulação ou retornos de carro.
Se você colocar vinte espaços entre uma palavra e a palavra que vem depois dela, o navegador renderizará apenas um único espaço ali. Isso é conhecido como colapso do espaço em branco e, na verdade, é um dos conceitos de HTML que muitos novos na área enfrentam no início.
Eles esperam que o espaço em branco do HTML funcione da maneira que funciona em um programa como o Microsoft Word, mas não é assim que o espaço em branco do HTML funciona.
Na maioria dos casos, o manuseio normal de texto em qualquer documento HTML é exatamente o que você precisa, mas em outros casos, você pode realmente querer mais controle sobre exatamente como o texto é espaçado e onde quebra as linhas. Isso é conhecido como texto pré-formatado (em outras palavras, você dita o formato).
Você pode adicionar texto pré-formatado às suas páginas da web usando o HTML
<pre>
Usando a tag <pre>
Muitos anos atrás, era comum ver páginas da web com blocos de texto pré-formatado.
Usar a tag <pre> para definir seções da página conforme formatadas pela própria digitação foi uma maneira rápida e fácil para os designers da web fazerem com que o texto fosse exibido da maneira que desejavam.
Isso foi antes do surgimento do CSS para layout, quando os web designers estavam realmente presos tentando forçar o layout usando tabelas e outros métodos somente HTML.
Isso (meio que) funcionou porque o texto pré-formatado é definido como um texto no qual a estrutura é definida por convenções tipográficas ao invés de renderização HTML.
Hoje, essa tag não é muito usada porque CSS nos permite ditar estilos visuais de maneira muito mais eficiente do que tentar forçar a aparência em nosso HTML e porque os padrões da Web ditam uma separação clara de estrutura (HTML) e estilos (CSS).
Ainda assim, pode haver casos em que o texto pré-formatado faça sentido, como para um endereço de correspondência onde você deseja forçar as quebras de linha ou para exemplos de poesia em que as quebras de linha são essenciais para a leitura e o fluxo geral do conteúdo.
Esta é uma maneira de usar a tag HTML <pre>:
O HTML típico reduz o espaço em branco do documento. Isso significa que os retornos de carro, espaços e caracteres de tabulação usados neste texto seriam todos recolhidos em um espaço.
A pre tag deixa os caracteres de espaço em branco como estão. Portanto, quebras de linha, espaços e tabulações são mantidos na renderização desse conteúdo pelo navegador.
Sobre fontes e texto pré-formatado
A tag <pre> faz mais do que apenas manter os espaços e quebras para o texto que você escreve.
Na maioria dos navegadores, ele é escrito em uma fonte mono espaçada. Isso torna os caracteres no texto todos iguais em largura. Em outras palavras, a letra i ocupa tanto espaço quanto a letra w.
Se você preferir usar outra fonte no lugar da fonte mono espaçada padrão que o navegador exibe, você ainda pode alterar isso com folhas de estilo e selecionar qualquer outra fonte na qual gostaria que o texto fosse renderizado.
HTML5
Uma coisa a se ter em mente é que, em HTML5, o atributo “largura” não é mais compatível com o elemento <pre>. No HTML 4.01, a largura especificava o número de caracteres que uma linha conteria, mas foi eliminado no HTML5 e posteriores.
