# CSS: “white-space”: X is not a “white-space” value.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-white-space-x-is-not-a-white-space-value
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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`:

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

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

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

### Correct: using valid `white-space` values

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

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

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

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

```html
<!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.
