Regras de tratamento de espaços em branco HTML
Os "caracteres de espaço em branco" em HTML incluem três tipos: espaço, tabulação e avanço de linha (CR/LF).
Sabemos que, por padrão, os caracteres de espaço em branco no código-fonte HTML são exibidos como espaços, e vários caracteres de espaço em branco consecutivos serão tratados como um, ou em outras palavras, vários caracteres de espaço em branco consecutivos serão mesclados.
No entanto, às vezes, esperamos que vários espaços consecutivos no código-fonte HTML possam ser renderizados de forma realista no navegador da web ou precisamos que as quebras de linha no código-fonte funcionem como quebras de linha reais. Assim, descobrimos a tag <pre>, que pode realmente restaurar a verdadeira situação dos caracteres de espaço em branco em seu texto interno.
Portanto, muitas vezes colocamos um pedaço de texto representando o código do computador na tag <pre>, e eles mostrarão seu próprio recuo de espaço e efeitos de quebra de linha no navegador, sem a necessidade de adicionarmos estilos e tags adicionais para controlá-lo. e quebras de linha.
À medida que nossa compreensão de CSS continua a se aprofundar, descobrimos que tudo isso é organizado pelo atributo de espaço em branco. A razão pela qual o elemento <pre> é tão mágico é que ele tem o estilo padrão {white-space: pre;}.
propriedade de espaço em branco
O atributo de espaço em branco em CSS é usado para definir as regras de processamento para caracteres de espaço em branco de texto, incluindo: se deve mesclar caracteres de espaço em branco, se deve reter quebras de linha e se deve permitir quebra automática de linha. Os diferentes comportamentos de cada valor de atributo são mostrados na tabela a seguir:
lista de valores de atributos de espaço em branco
| valor do atributo | espaço em branco | caractere de nova linha | Quebra automática de linha | apareceu pela primeira vez em |
|---|---|---|---|---|
normal | mesclar | negligência | permitir | CSS1 |
nowrap | mesclar | negligência | não permitido | CSS1 |
pre | reserva | reserva | não permitido | CSS1 |
pre-wrap | reserva | reserva | permitir | CSS2.1 |
pre-line | mesclar | reserva | permitir | CSS2.1 |
( Nota : No CSS1/2, o atributo de espaço em branco só pode ser aplicado a elementos de nível de bloco; no CSS 2.1, ele pode ser aplicado a todos os elementos.)
Se precisarmos que um elemento contêiner tenha um comportamento de processamento de espaço em branco semelhante ao elemento <pre>, basta definir o estilo {white-space: pre;} para ele.
Necessidade de pré-embrulho
Vamos primeiro explicar o comportamento de "quebra automática de linha" na tabela acima. Refere-se ao fluxo de texto dentro de um elemento sendo digitado na direção do texto quando o fluxo de texto encontra um limite que limita sua extensão contínua, seja para quebrar a linha. "Quebra de texto não é permitida" significa que o fluxo de texto irá transbordar o elemento.
Portanto, o estilo {white-space: pre;} às vezes não atende às nossas expectativas. Por exemplo, em algumas situações que não exigem rigor especial, ou ao formatar alguns trechos de código que não são sensíveis a quebras de linha (como HTML ou CSS), não queremos que uma longa linha de código no trecho de código cause seu elemento contêiner para rolar horizontalmente porque é difícil de ler. Esperamos que, neste caso, o código longo seja agrupado automaticamente.
Neste momento, comparando as diferentes características comportamentais de cada valor de atributo na tabela acima, descobriremos que o valor do atributo pré-envoltório se destaca - é exatamente o que precisamos.