Propriedade white-space
Última atualização: 2026-09-13
white-space Propriedade white-space
A propriedade white-space do CSS controla como os espaços em branco (espaços, tabulações e quebras de linha) dentro de um elemento são tratados e se o texto quebra automaticamente. Ela decide se o navegador colapsa espaços consecutivos, preserva a formatação original ou quebra linhas quando o texto transborda. É essencial para exibir código, preservar layout e efeitos de ellipsis de linha única.
| Categoria | |
|---|---|
| Valor Inicial | normal |
| Herdado | Sim |
| Aplica-se A | all |
| Tipo de Animação | discrete |
| Versão CSS | CSS1 |
| Status | Padrão |
📝 Sintaxe
white-space: normal | nowrap | pre | pre-wrap | pre-line | break-spaces;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
normal | nowrap | pre | pre-wrap | pre-line | break-spaces | Palavra-chave | Tratamento de espaços em branco e regras de quebra |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| white-space | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Dica： Um ellipsis de linha única requer três propriedades juntas: white-space: nowrap, overflow: hidden e text-overflow: ellipsis.
Importante： A diferença entre pre-wrap e pre-line: pre-wrap preserva todos os espaços em branco e quebra; pre-line colapsa espaços mas mantém quebras de linha, e também quebra.
❓ Perguntas Frequentes
QQual é a diferença entre white-space: normal e nowrap?
Anormal colapsa espaços em branco consecutivos e permite que o texto quebre na borda do contêiner; nowrap também colapsa espaços em branco mas proíbe a quebra automática, então o texto continua se estendendo em uma linha até encontrar uma tag <br>.
QQuando devo usar white-space: pre em vez de white-space: pre-wrap?
Apre preserva a formatação original completamente e nunca quebra, sendo adequada para exibir blocos de código; pre-wrap também preserva a formatação mas permite a quebra na borda do contêiner, o que convém a layouts de largura adaptável.
QQual é a diferença entre white-space: pre-wrap e pre-line?
AAmbas permitem quebra. pre-wrap preserva todos os espaços em branco, incluindo sequências de espaços consecutivos; pre-line colapsa espaços consecutivos e mantém apenas quebras de linha. Use pre-wrap quando a indentação precisar permanecer exata, e pre-line quando só precisar preservar quebras de linha.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Propriedade text-overflow
Controla como o texto transbordante é mostrado com um ellipsis.
Propriedade word-break
Controla as regras de quebra de linha para palavras.
