Skip to main content
Validação HTML

CSS: “white-space”: X não é um valor de “white-space”.

Sobre este problema HTML

A propriedade white-space é uma forma abreviada que combina o comportamento de white-space-collapse e text-wrap-mode. Quando você usa um valor que não corresponde a nenhuma das palavras-chave aceites — seja devido a um erro tipográfico, um valor inventado, ou um valor que pertence a uma propriedade CSS diferente — o validador W3C marca-o como inválido. Isto acontece frequentemente quando os autores confundem valores de propriedades relacionadas (como usar break-spaces onde não é suportado em estilos inline que estão a ser validados, ou escrever incorretamente nowrap como no-wrap).

Usar valores CSS inválidos significa que os navegadores ignorarão completamente a declaração, voltando ao comportamento padrão (white-space: normal). Isto pode causar quebra de texto ou colapso de espaços em branco inesperados que quebram o seu layout. Manter o seu CSS válido assegura renderização consistente entre navegadores e torna as suas folhas de estilo mais fáceis de manter e depurar.

Os valores aceites para white-space são:

  • normal — Colapsa sequências de espaços em branco, quebra texto conforme necessário (padrão).
  • nowrap — Colapsa espaços em branco mas suprime quebras de linha; o texto não quebrará.
  • pre — Preserva espaços em branco e quebras de linha exatamente como escritos, como o elemento <pre>.
  • pre-wrap — Preserva espaços em branco e quebras de linha, mas também permite que o texto quebre quando necessário.
  • pre-line — Colapsa sequências de espaços em branco num único espaço, mas preserva quebras de linha explícitas e permite quebra.
  • break-spaces — Semelhante a pre-wrap, mas espaços finais e espaços no fim das linhas não ficam suspensos e afetam o dimensionamento da caixa.

Adicionalmente, CSS Text Level 4 introduziu combinações abreviadas usando palavras-chave white-space-collapse e text-wrap-mode, como collapse, preserve, wrap, e preserve nowrap. No entanto, o suporte para estas formas abreviadas mais recentes varia, e validadores ou navegadores mais antigos podem não as reconhecer.

Valores CSS globais (inherit, initial, revert, revert-layer, unset) também são válidos.

Exemplos

Incorreto: valor inválido desencadeia o erro

Um erro comum é usar no-wrap (com hífen) em vez do correto nowrap:

<p style="white-space: no-wrap;">Este texto não deveria quebrar.</p>

Outro erro comum é usar um valor de uma propriedade completamente diferente:

<p style="white-space: hidden;">Este texto tem um valor white-space inválido.</p>

Correto: usando valores válidos de white-space

<p style="white-space: nowrap;">Este texto não quebrará para uma nova linha.</p>
<p style="white-space: pre-wrap;">Este texto preserva   espaços em branco
e quebras de linha, mas também quebra quando necessário.</p>
<p style="white-space: pre-line;">Isto colapsa   espaços extra
mas preserva quebras de linha explícitas.</p>

Correto: usando a propriedade num bloco <style>

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Exemplo de white-space</title>
  <style>
    .no-wrap {
      white-space: nowrap;
    }
    .preserve {
      white-space: pre-wrap;
    }
  </style>
</head>
<body>
  <p class="no-wrap">Este parágrafo longo ficará numa única linha sem quebrar.</p>
  <p class="preserve">Isto preserva    múltiplos espaços
e quebras de linha exatamente como escritos.</p>
</body>
</html>

Se encontrar este erro de validação, verifique novamente o seu valor white-space para erros tipográficos e confirme que corresponde a uma das palavras-chave reconhecidas listadas acima.

Encontre problemas como este automaticamente

O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.

Ajude-nos a melhorar os nossos guias

Este guia foi útil?

Pronto para validar os seus sites?
Comece o seu teste gratuito hoje.