Verificação HTML: CSS: “white-space”: X is not a “white-space” value.

Sobre este problema HTML

The white-space property is a shorthand that combines the behavior of white-space-collapse and text-wrap-mode. When you use a value that doesn’t match any of the accepted keywords — whether due to a typo, a made-up value, or a value that belongs to a different CSS property — the W3C validator flags it as invalid. This commonly happens when authors confuse values from related properties (like using break-spaces where it isn’t supported in inline styles being validated, or misspelling nowrap as no-wrap).

Using invalid CSS values means browsers will ignore the declaration entirely, falling back to the default behavior (white-space: normal). This can cause unexpected text wrapping or whitespace collapsing that breaks your layout. Keeping your CSS valid ensures consistent rendering across browsers and makes your stylesheets easier to maintain and debug.

The accepted values for white-space are:

normal — Collapses whitespace sequences, wraps text as needed (default).
nowrap — Collapses whitespace but suppresses line breaks; text won’t wrap.
pre — Preserves whitespace and line breaks exactly as written, like the <pre> element.
pre-wrap — Preserves whitespace and line breaks, but also allows text to wrap when necessary.
pre-line — Collapses whitespace sequences into a single space, but preserves explicit line breaks and allows wrapping.
break-spaces — Similar to pre-wrap, but trailing spaces and spaces at the end of lines don’t hang and do affect box sizing.

Additionally, CSS Text Level 4 introduced shorthand combinations using white-space-collapse and text-wrap-mode keywords, such as collapse, preserve, wrap, and preserve nowrap. However, support for these newer shorthand forms varies, and older validators or browsers may not recognize them.

Global CSS values (inherit, initial, revert, revert-layer, unset) are also valid.

Examples

Incorrect: invalid value triggers the error

A common mistake is using no-wrap (with a hyphen) instead of the correct nowrap:

<p style="white-space: no-wrap;">This text should not wrap.</p>

Another common mistake is using a value from a different property entirely:

<p style="white-space: hidden;">This text has an invalid white-space value.</p>

Correct: using valid `white-space` values

<p style="white-space: nowrap;">This text will not wrap to a new line.</p>

<p style="white-space: pre-wrap;">This text preserves   whitespace
and line breaks, but also wraps when needed.</p>

<p style="white-space: pre-line;">This collapses   extra spaces
but preserves explicit line breaks.</p>

Correct: using the property in a `<style>` block

<!DOCTYPE html>
<html lang="en">
<head>
  <title>White-space example</title>
  <style>
    .no-wrap {
      white-space: nowrap;
    }
    .preserve {
      white-space: pre-wrap;
    }
  </style>
</head>
<body>
  <p class="no-wrap">This long paragraph will stay on a single line without wrapping.</p>
  <p class="preserve">This preserves    multiple spaces
and line breaks exactly as written.</p>
</body>
</html>

If you encounter this validation error, double-check your white-space value for typos and confirm it matches one of the recognized keywords listed above.