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 | 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
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
white-space | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 5.5 | Opera Full support 4 | Safari Full support 1 | WebView Android Full support 37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android ? | Safari iOS Full support 1 | Samsung Internet Android ? |
break-spaces | Chrome Full support 76 | Edge No support No | Firefox Full support 69 | IE No support No | Opera Full support 62 | Safari No support No | WebView Android Full support 76 | Chrome Android Full support 76 | Firefox Android No support No | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
pre | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 6 | Opera Full support 4 | Safari Full support 1 | WebView Android Full support 37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android ? | Safari iOS Full support 1 | Samsung Internet Android ? |
pre-line | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 3.5 | IE Full support 8 | Opera Full support 9.5 | Safari Full support 3 | WebView Android Full support 37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android ? | Safari iOS Full support 1 | Samsung Internet Android ? |
pre-wrap | Chrome Full support 1 | Edge Full support 12 | Firefox
Full support
3
| IE
Full support
8
| Opera Full support 8 | Safari Full support 3 | WebView Android Full support 37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android ? | Safari iOS Full support 1 | Samsung Internet Android ? |
Support in SVG | Chrome No support No | Edge Full support 12 | Firefox Full support 36 | IE Full support 10 | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android Full support 36 | Opera Android ? | Safari iOS No support No | Samsung Internet Android No support No |
Support on <textarea> | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 36 | IE Full support 5.5 | Opera Full support 4 | Safari Full support 1 | WebView Android Full support 37 | Chrome Android Full support 18 | Firefox Android Full support 36 | Opera Android ? | Safari iOS Full support 1 | Samsung Internet Android ? |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- See implementation notes.
- See implementation notes.
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.
[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 */ }