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 com base no tamanho da tela que está sendo usada para exibir a página. O texto HTML irá quebrar uma linha onde ele precisa, uma vez que tenha atingido o 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ê faz.
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 a barra de espaço, a tabulação ou os 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. Isso é conhecido como colapso do espaço em branco e, na verdade, é um dos conceitos de HTML com os quais muitos novos no setor lutam inicialmente. Eles esperam que o espaço em branco do HTML funcione da maneira como 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 processamento normal de texto em qualquer documento HTML é exatamente o que você precisa, mas em outras instâncias, você pode realmente querer mais controle sobre exatamente como o texto é distribuído e onde as linhas são quebradas. 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 código HTML
Usando o Tag
Muitos anos atrás, costumava ser comum ver páginas da Web com blocos de texto pré-formatado. Usando o
pré Uma tag para definir seções da página como formatadas pela própria digitação foi uma maneira rápida e fácil de os web designers exibirem o texto da maneira que desejavam. Isso foi antes do surgimento do CSS para o layout, quando os web designers estavam realmente presos tentando forçar o layout usando tabelas e outros métodos somente de HTML. Isso (meio) retrocedeu porque o texto pré-formatado é definido como texto em que a estrutura é definida por convenções tipográficas e não pela renderização de HTML.
Hoje, essa tag não é muito usada porque o 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 clara separação de estrutura (HTML) e estilos (CSS). Ainda assim, pode haver instâncias em que o texto pré-formatado faça sentido, como para um endereço de correspondência em que 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.
Aqui está uma maneira de usar o HTML
tag:
Twas brillig e o slithey toves
Fez giro e gimble
em
a
wabe
HTML típico recolhe o espaço em branco no 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ê acabaria com uma linha de texto, assim: Twas brillig e the slithey toves Fizeram giro e giro no wabe A tag pré deixa os caracteres de espaço em branco como estão. Portanto, as quebras de linha, espaços e guias são todos mantidos na renderização do navegador desse conteúdo. Colocando a citação dentro de um pré tag para o mesmo texto resultaria nessa exibição: Twas brillig e o slithey toves Fez giro e gimble em a wabe o pré A tag faz mais do que apenas manter os espaços e as quebras para o texto que você escreve. Na maioria dos navegadores, ele é escrito em uma fonte monoespaçada. Isso faz com que os caracteres no texto sejam 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 padrão monoespaçada, que o navegador exibe, você ainda pode alterar isso com folhas de estilo e selecionar qualquer outra fonte na qual deseja que o texto seja renderizado. Uma coisa a ter em conta é que, em HTML5, o atributo "width" não é mais suportado para o Editado por Jeremy Girard em 2/2/17 Em relação a fontes
HTML5
elemento. Em HTML 4.01, a largura especificava o número de caracteres que uma linha conteria, mas isso foi descartado para HTML5 e posteriores.
