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
Midiavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Sintaxe

Formal syntax: normal | pre | nowrap | pre-wrap | pre-line
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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support11215.541
pre1121641
pre-wrap112

3

1 — 3.6 -moz-

8183
pre-line1123.589.53
Support on <textarea>1 ?365.541
Support in SVG No ?36 ? ? ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support ? ? Yes ? ? ? ?
pre ? ? ? ? ? ? ?
pre-wrap ? ? ? ? ? ? ?
pre-line ? ? ? ? ? ? ?
Support on <textarea> ? ? ? ? ? ? ?
Support in SVG ? ? ? ? ? ? No

1. From Internet Explorer 5.5 to 7, word-wrap: break-word; can be used for line breaks in pre elements.

 

[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 */
}

Etiquetas do documento e colaboradores

Colaboradores desta página: mtsgeneroso, maurojs10, fscholz, Sebastianz, rafaellyra
Última atualização por: mtsgeneroso,