O que é texto pré-formatado?

Veja como usar a tag de texto pré-formatado em seu código HTML

atakan / Getty Images

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á 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 quando chegar ao final de sua área de contenção. No final, o navegador desempenha um papel mais importante na determinação de como o texto quebra 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 com o qual muitos novos na indústria lutam no início. Eles esperam que o espaço em branco do HTML funcione da mesma forma que em um programa como o Microsoft Word, mas não é assim que o espaço em branco do HTML funciona.

Na maioria dos casos, a manipulação 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 se espaça e onde ele 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

Usando o |_+_|

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, é 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 comfolhas de estiloe selecione qualquer outro Fonte você gostaria que o texto fosse renderizado.
  
 HTML5 
 
Uma coisa a ter em mente é que, em HTML5, o atributo 'width' não é mais suportado para o
elemento. No HTML 4.01, a largura especificava o número de caracteres que uma linha conteria, mas isso foi descartado para HTML5 e além.