Propriedade CSS white-space

A propriedade CSS white-space controla dois aspectos ao mesmo tempo: como sequências de espaços em branco (espaços, tabulações e quebras de linha escritas no código HTML) são colapsadas ou preservadas, e se o texto quebra ao atingir a borda de seu contêiner.

Por padrão, os navegadores são agressivos com os espaços em branco. Qualquer sequência de espaços, tabulações ou quebras de linha na marcação colapsa para um único espaço, e o texto quebra conforme necessário para caber em sua caixa. É por isso que este código:

<p>Hello       world</p>

é renderizado como Hello world com um único espaço, independentemente de quantos espaços você digitou. A propriedade white-space permite alterar esse comportamento — por exemplo, para manter a formatação do código-fonte, preservar as quebras de linha de um poema, ou impedir que um rótulo quebre em duas linhas.

Quando usar

nowrap — mantém o rótulo de um botão, célula de tabela ou item de navegação em uma única linha.
pre / pre-wrap — exibe texto pré-formatado (código, arte ASCII, recuo) onde os espaços e quebras de linha que você digitou devem ser preservados. É o que o elemento <pre> usa por padrão.
pre-line — preserva as quebras de linha que você escreveu no código-fonte enquanto ainda colapsa espaços extras — útil para endereços ou mensagens curtas de múltiplas linhas armazenadas como texto simples.

Se o seu objetivo é quebrar palavras longas indivisíveis (como uma URL) em vez de controlar os espaços em branco do código-fonte, use overflow-wrap ou word-break.

Como cada valor se comporta

A tabela abaixo resume como cada valor trata novas linhas, espaços e tabulações, e a quebra de texto.

Valor	Novas linhas	Espaços e tabulações	Quebra de texto
`normal`	Colapsa	Colapsa	Quebra
`nowrap`	Colapsa	Colapsa	Sem quebra
`pre`	Preserva	Preserva	Sem quebra
`pre-wrap`	Preserva	Preserva	Quebra
`pre-line`	Preserva	Colapsa	Quebra
`break-spaces`	Preserva	Preserva	Quebra (também quebra após cada espaço preservado)

Valor Inicial	normal
Aplica-se a	Elementos de nível inline e células de tabela, também se aplica a ::first-letter e ::first-line.
Herdado	Não.
Animável	Sim. A propriedade white-space é animável.
Versão	CSS1
Sintaxe DOM	object.style.whiteSpace = "nowrap";

Sintaxe

Sintaxe da propriedade CSS white-space

white-space: normal | nowrap | pre | pre-line | pre-wrap | break-spaces | initial | inherit;

Exemplo da propriedade white-space com o valor "normal"

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        white-space: normal;
      }
    </style>
  </head>
  <body>
    <h2>White-space property example</h2>
    <div>
      Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
    </div>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Com normal, as sequências de espaços em branco no código-fonte colapsam para espaços simples e o texto quebra para uma nova linha ao atingir a borda do <div>.

Exemplo da propriedade white-space com o valor "nowrap"

Com nowrap, o texto ainda colapsa os espaços em branco, mas nunca quebra. Ele ultrapassa o limite do contêiner em vez de ir para uma segunda linha, o que geralmente provoca overflow horizontal (frequentemente combinado com text-overflow para adicionar reticências).

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        white-space: nowrap;
      }
    </style>
  </head>
  <body>
    <h2>White-space property example</h2>
    <div>
      Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
    </div>
  </body>
</html>

Experimente Você Mesmo »

Exemplo da propriedade white-space com o valor "pre-line"

Com pre-line, as sequências de espaços ainda colapsam para um único espaço, mas as quebras de linha escritas no código HTML são preservadas e o texto continua a quebrar conforme necessário.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        white-space: pre-line;
      }
    </style>
  </head>
  <body>
    <h2>White-space property example</h2>
    <div>
      Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
    </div>
  </body>
</html>

Experimente Você Mesmo »

No próximo exemplo, você pode ver a diferença entre os valores nowrap, normal e pre-wrap lado a lado.

Exemplo da propriedade white-space com três valores

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.t1 {
        white-space: nowrap;
      }
      p.t2 {
        white-space: normal;
      }
      p.t3 {
        white-space: pre-wrap;
      }
    </style>
  </head>
  <body>
    <h2>White-space property example</h2>
    <h3>white-space: nowrap;</h3>
    <p class="t1">
      Lorem Ipsum is dummy text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
    </p>
    <h3>white-space: normal;</h3>
    <p class="t2">
      Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
    </p>
    <h3>white-space: pre-wrap;</h3>
    <p class="t3">
      Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
    </p>
  </body>
</html>

Experimente Você Mesmo »

Valores

Valor	Descrição	Experimente
normal	Quebra linhas conforme necessário para preencher as caixas de linha. Este é o valor padrão dessa propriedade.	Experimente »
nowrap	Com este valor, o texto nunca quebrará para a próxima linha.	Experimente »
pre	Preserva tanto espaços quanto quebras de linha. O texto não quebrará para a próxima linha.	Experimente »
pre-line	Sequências de espaços em branco colapsam para um único espaço. O texto quebrará quando necessário e em quebras de linha.	Experimente »
pre-wrap	Os espaços em branco são preservados pelo navegador. O texto quebrará quando necessário e em quebras de linha.	Experimente »
break-spaces	O mesmo comportamento de "pre-wrap", exceto que: qualquer sequência de espaços em branco preservados sempre ocupa espaço (inclusive no final de uma linha), existe uma oportunidade de quebra de linha após cada caractere de espaço em branco preservado, e esses espaços afetam o tamanho intrínseco da caixa em vez de ficarem suspensos.	Experimente »
initial	Faz a propriedade usar seu valor padrão.	Experimente »
inherit	Herda a propriedade do elemento pai.

Propriedades relacionadas

overflow-wrap e word-break — controlam onde strings longas e indivisíveis se quebram.
text-overflow — use em conjunto com white-space: nowrap para recortar texto com reticências.
word-wrap — o alias legado para overflow-wrap.
overflow — determina o que acontece com o conteúdo que ultrapassa o contêiner quando não quebra.

Prática

Quais são algumas das propriedades do valor 'white-space' no CSS?

Aplica-se a caixas inline.Permite controlar os caracteres de espaço em branco no texto.Não afeta espaços, linhas ou outros tipos de espaço em branco.Aceita valores como 'normal', 'nowrap', 'pre', 'pre-wrap' e 'pre-line'.Afeta a cor do texto no CSS.