Resumo
A propriedade CSS white-space é usada para descrever como os espaços em branco dentro dos elementos são manipulados.
| Initial value | normal |
|---|---|
| Aplica-se a | all elements |
| Inherited | yes |
| Midia | visual |
| Computed value | as specified |
| Animation type | discrete |
| Canonical order | the 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. |
Working Draft | Aumenta a precisão dos algoritmos de quebra. |
| CSS Level 2 (Revision 1) The definition of 'white-space' in that specification. |
Recommendation | Especificação inicial. |
Compatibilidade de Navegadores
| Valor | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
Suporte básico (normal and nowrap) |
1.0 | 1.0 (1.7 or earlier) | 5.5 [1] | 4.0 | 1.0 (85) |
pre |
1.0 | 1.0 | 6.0 | 4.0 | 1.0 (85) |
pre-wrap |
1.0 | 1.0 (1.7 or earlier) — 3.5 (1.9.1)-moz 3.0 (1.9) |
8.0 | 8.0 | 3.0 (522) |
pre-line |
1.0 | 3.5 (1.9.1) | 8.0 | 9.5 | 3.0 (522) |
Support on <textarea> |
1.0 | 36 (36) | 5.5 | 4.0 | 1.0 (85) |
| Valor | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Suporte básico | ? | ? | ? | ? | ? |
[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 */
}