Início / coding / Perguntas / 79550235
Accepted
張俊芝
Asked: 2025-04-02 17:23:10 +0800 CST

Nova linha final não contribui para a altura da caixa em <pre>

  • 772

Testei o seguinte trecho de código no Chrome e no Firefox:

<pre style="border: solid">Test me <!-- One \n: -->
</pre>

Notei que o <pre>elemento mostra apenas uma altura de linha em vez de duas (o que significa que a quebra de linha não aumenta a altura do elemento). Para obter duas linhas de altura, preciso adicionar uma quebra de linha extra:

<pre style="border: solid">Test me <!-- First \n: -->
<!-- Second \n: -->
</pre>

Em outras palavras, os navegadores sempre ignoram uma quebra de linha final - esse comportamento é consistente tanto no Chrome quanto no Firefox. Minha pergunta é: esse comportamento é especificado em algum padrão? Ou é apenas uma escolha de implementação coincidente de ambos os navegadores?

html

2 respostas

  1. Best Answer

    Diferentemente da faixa de nova linha inicial, que é um recurso do analisador HTML do <pre>elemento, o comportamento da nova linha final é apenas CSS normal.

    O importante sobre o caractere de nova linha é que ele é considerado no final da linha antes da quebra de linha, não no início da linha depois da quebra de linha.

    Então a caixa de linha no final está vazia e segue a especificação de contextos de formatação em linha do CSS 9.4.2 que diz:

    Caixas de linha que não contêm texto, nenhum espaço em branco preservado, nenhum elemento embutido com margens, preenchimento ou bordas diferentes de zero e nenhum outro conteúdo de fluxo (como imagens, blocos embutidos ou tabelas embutidas) e não terminam com uma nova linha preservada devem ser tratadas como caixas de linha de altura zero para fins de determinar as posições de quaisquer elementos dentro delas e devem ser tratadas como inexistentes para qualquer outra finalidade.

    O caractere de nova linha é preservado, mas está no final da primeira linha. Então, a caixa de linha vazia da segunda linha é tratada como não existente.

    Como o <pre>elemento é por padrão display:block, isso inicia o próximo conteúdo abaixo dele independentemente de o caractere de nova linha estar lá ou não. Mas ao definir o <pre>elemento para display:inline, também podemos ver que a nova linha realmente estava lá o tempo todo:

    pre {
  display: inline;
}
section {
  border: 1px solid;
}
    <section>
Before<pre>Test me 1
</pre>After
</section>  
<section> 
Before<pre>Test me 2</pre>After
</section>

    Veja como isso contrasta com a faixa de nova linha principal, que desapareceu completamente:

    pre {
  display: inline;
  
}
section {
  border: 1px solid;
}
    <section>
Before<pre>
Test me 1</pre>After
</section>  
<section>  
Before<pre>Test me 2</pre>After
</section>

    • 2

  2. Não, esse comportamento não é especificado em nenhum padrão. É apenas como os navegadores interpretam a tag pre. Embora, de acordo com o padrão HTML, a quebra de linha deva estar lá, os navegadores a interpretam assim.

    • 0

relate perguntas