Uma explicação do que é texto pré-formatado em HTML

Ao adicionar 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á um layout muito fluido que muda com base no tamanho da tela sendo usado 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 indústria lutam inicialmente. 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 tratamento normal de texto em qualquer documento HTML é exatamente o que você precisa, mas em outros instâncias, você pode realmente querer mais controle sobre exatamente como o texto se espaça e onde ele quebra 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.

 Usando o 
 Marcação 

Muitos anos atrás, era comum ver páginas da web com blocos de texto pré-formatado. Usando o 
 tag para definir as seções da página conforme formatadas pela própria digitação foi uma maneira rápida e fácil para os web designers 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) 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 para 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 contente. 

Aqui está uma maneira de usar o HTML 
 marcação: 

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. Se você digitou a citação acima em uma tag HTML típica como a tag p (parágrafo), você terminaria com uma linha de texto, como este: 

Twas brillig e o slithey toves Giraram e gimble no wabe. 

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. Colocando a citação dentro de um 
 tag para o mesmo texto resultaria nesta exibição: 
Twas Brillig e os Slithey Toves
Girou e gimble
dentro
a
aspirante a
 Sobre fontes 

O 
 tag 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 monoespaç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 monoespaçada padrão que o navegador exibe, você ainda pode alterar isso com folhas de estilo e selecione qualquer outro Fonte você gostaria que o texto fosse renderizado. 
 HTML5 

Uma coisa a ter em mente é que, em HTML5, o atributo "largura" não é mais compatível com o 
 elemento. No HTML 4.01, a largura especificava o número de caracteres que uma linha conteria, mas foi eliminado no HTML5 e posteriores.