4

Eu já sei que, ao usar white-space: nowrap, o texto não quebra quando ultrapassa o limite de um container. Porém eu percebi que essa propriedade no CSS possui as opções pre, pre-line e pre-wrap.

Dessas três últimas, gostaria de saber qual é a diferença entre casa uma delas. Gostaria de alguns exemplos.

1 Resposta 1

4

A diferença entre cada um dos valores é basicamente a forma de tratar espaços.

No HTML, quando há 2 ou mais espaços no código-fonte, o navegador renderiza como apenas 1 espaço, e quebra de linha de texto no código-fonte também é tratado como 1 espaço. Por exemplo:

<div>
   texto1    texto2
</div>

Veja acima que entre "texto1" e "texto2" possui 4 espaços, mas o navegador só renderiza 1 espaço.

E aqui quando um texto vem abaixo do outro, essa "quebra de linha no código-fonte" entre "texto1" e "texto2" é tratada com 1 espaço:

<div>
   texto1
   texto2
</div>

Esse é o padrão do HTML. Porém, se você aplicar white-space: pre na div acima, todos os espaços são renderizados como estão no código-fonte, incluindo os espaços da indentação e quebras de linha, veja:

div{
  white-space: pre;
}
<div>
   texto1
      texto2
</div>

É uma espécia de WYSIWYG (o que você vê é o que você tem).

No caso do pre-line é diferente. Ele suprime mais de 1 espaço em apenas 1 espaço (o que é o normal no HTML) mas mantém as quebras de linha no texto como estão no código-fonte:

div{
  width: 100px;
  border: 1px solid #000;
  white-space: pre-line;
}
<div>
    Lorem     ipsum dolor
    sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

Veja acima que entre as palavras "Lorem" e "ipsum" possui 5 espaços, mas é renderizado apenas 1 espaço. Ele mantém a quebra de linha do código-fonte antes do texto (entre a <div> e o início do texto). Veja que no início do texto há uma linha em branco que é o espaço gerado pela indentação do texto na div.

No caso do pre-wrap, os espaços são preservados como estão no código-fonte, inclusive o espaço no início do contêiner, gerando uma nova linha antes do texto, por causa do espaço entre <div> e o início do texto:

div{
  width: 100px;
  border: 1px solid #000;
  white-space: pre-wrap;
}
<div>
   Lorem     ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

Resumindo:

pre

Mantém os espaços e quebras de linha como estão no código-fonte.

pre-line

Mantém as quebras de linha do código-fonte e suprime mais de 1 espaço em apenas 1.

pre-wrap

Mesma coisa do pre-line, mas mantém os espaços como estão no código-fonte, sem supressão.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .