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 apre-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.
Saiba mais: