white-space

Resumo

A propriedade CSS white-space é usada para descrever como os espaços em branco dentro dos elementos são manipulados.

Initial valuenormal
Aplica-se aall elements
Inheritedyes
Computed valueas specified
Animation typediscrete

Sintaxe

Formal syntax: normal | pre | nowrap | pre-wrap | pre-line | break-spaces
white-space: normal
white-space: nowrap
white-space: pre
white-space: pre-wrap
white-space: pre-line

white-space: inherit

Valores

normal
Sequências de espaços em branco são recolhidas. Caracteres de nova linha no código são tratados como outros espaços em branco. As linhas quebram conforme a necessidade para preencher as linhas das caixas (boxes).
nowrap
Recolhe os espaços em branco como no normal, mas suprime as quebras de linha (quebra de texto) no texto.
pre
Sequências de espaço em branco são preservadas, linhas são quebradas apenas em carateres de nova linha no código e em elementos <br>.
pre-wrap
Sequências de espaço em branco são preservadas. Linhas são quebradas em caracteres de nova linha, em <br> e quando necessário para preencher as linhas das caixas  (boxes).
pre-line
Sequências de espaços em branco são recolhidas. Linhas são quebradas em caracteres de nova linha, em <br> e quando necessário para preencher as linhas das caixas  (boxes).

A tabela a seguir resume o comportamento dos valores para white-space:

  Novas linhas Espaços e Tabulações (tabs) Quebra de texto 
normal Recolhido Recolhido Quebra
nowrap Recolhido Recolhido Sem quebra
pre Preservado Preservado Sem quebra
pre-wrap Preservado Preservado Quebra
pre-line Preservado Recolhido Quebra

Exemplos

code {
  white-space: pre;
}

Especificações

Especificação Estado Comentário
CSS Text Module Level 3
The definition of 'white-space' in that specification.
Rascunho atual Aumenta a precisão dos algoritmos de quebra.
CSS Level 2 (Revision 1)
The definition of 'white-space' in that specification.
Recomendação Especificação inicial.

Compatibilidade de Navegadores

BCD tables only load in the browser

 

[1] Internet Explorer 5.5+ suporta word-wrap: break-word;
O código à seguir permite quebras de linhas dentro de elementos pre:

pre {
  word-wrap: break-word;      /* IE 5.5-7 */
  white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
  white-space: pre-wrap;      /* current browsers */
}