3

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.

2 Respostas 2

2

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.

-1

Retirado do site da Mozilla (minha tradução com algumas modificações para aumentar o entendimento) (https://developer.mozilla.org/en-US/docs/Web/CSS/white-space):

Valores de white-space:

  • normal

    • Sequências de espaço em branco são quebrados. Os caracteres de nova linha no HTML são tratados da mesma forma que outros espaços em branco. As linhas são quebradas conforme necessário para preencher as caixas.
  • nowrap

    • Quebra espaços em branco como normal, mas reprime quebras de linha no HTML.
  • pre

    • Sequências de espaço em branco são preservadas. As linhas são quebradas apenas nos caracteres de nova linha na origem e nos
      elementos.
  • pre-wrap

    • Sequências de espaço em branco são preservadas. As linhas são quebradas com caracteres de nova linha, com <br> e conforme necessário para preencher as caixas.
  • pre-line

    • Sequências de espaço em branco são quebradas. As linhas são quebradas com caracteres de nova linha, com <br> e conforme necessário para preencher as caixas de linha.
  • break-spaces

    • Tem comportamento idêntico à pre-wrap, exceto que:

    • Qualquer sequência de espaço em branco preservado sempre ocupa espaço, inclusive no final da linha.

    • Existe uma oportunidade de quebra de linha após cada caractere de espaço em branco preservado, inclusive entre caracteres de espaço em branco.

    • Esses espaços preservados ocupam espaço e não travam e, portanto, afetam os tamanhos intrínsecos da caixa (tamanho mínimo e máximo).

Mais detalhes no site.

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 .