CSS White-space

The white-space property in CSS controls how whitespace inside an element is handled. This includes spaces, tabs, and line breaks. The property affects how content is wrapped or how whitespace is collapsed.

Syntax

element {
    white-space: normal | nowrap | pre | pre-wrap | pre-line | break-spaces;
}

Try It Now

Property Values

  • normal:
    • Collapses whitespace (multiple spaces become a single space).
    • Lines break at necessary points (e.g., where content overflows).
    • Default value for most elements.
    • Example: white-space: normal;
  • nowrap:
    • Collapses whitespace as with normal, but does not allow line breaks.
    • Example: white-space: nowrap;
  • pre:
    • Preserves whitespace and line breaks (acts like the <pre> tag).
    • Content will overflow if it does not fit in the container.
    • Example: white-space: pre;
  • pre-wrap:
    • Preserves whitespace but allows lines to break if necessary to fit in the container.
    • Example: white-space: pre-wrap;
  • pre-line:
    • Collapses whitespace as with normal, but preserves line breaks.
    • Example: white-space: pre-line;
  • break-spaces:
    • Preserves whitespace, and lines break at any preserved line break or at the point where the content overflows, similar to pre-wrap.
    • Example: white-space: break-spaces;
  • inherit:
    • Inherits the white-space value from its parent element.
  • initial:
    • Resets the white-space property to its default value (normal).
  • unset:
    • Removes the white-space value, returning it to the inherited value if specified, or the initial value if not.

Examples

Example 1: Using white-space: normal

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .normal {
            white-space: normal;
            width: 200px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div class="normal">
        This is some text with      multiple spaces and line breaks. It should wrap and collapse whitespace.
    </div>
</body>
</html>

Try It Now

Example 2: Using white-space: nowrap

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .nowrap {
            white-space: nowrap;
            width: 200px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div class="nowrap">
        This is some text that will not wrap and will overflow the container.
    </div>
</body>
</html>

Try It Now

Example 3: Using white-space: pre

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .pre {
            white-space: pre;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div class="pre">
        This is some text
        with multiple spaces    and line breaks.
        It will preserve the format exactly.
    </div>
</body>
</html>

Try It Now

Example 4: Using white-space: pre-wrap

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .pre-wrap {
            white-space: pre-wrap;
            width: 200px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div class="pre-wrap">
        This is some text
        with multiple spaces    and line breaks.
        It will wrap where necessary and preserve whitespace.
    </div>
</body>
</html>

Try It Now

Example 5: Using white-space: pre-line

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .pre-line {
            white-space: pre-line;
            width: 200px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div class="pre-line">
        This is some text
        with multiple spaces    and line breaks.
        It will collapse spaces but preserve line breaks.
    </div>
</body>
</html>

Try It Now

Use Cases for white-space

  • normal: Use when you want text to behave naturally, collapsing multiple spaces and wrapping lines as needed.
  • nowrap: Useful for keeping inline elements (like buttons or labels) on a single line.
  • pre: Best for displaying preformatted text, such as code snippets.
  • pre-wrap: Ideal for situations where you need to preserve whitespace and line breaks, but also need to wrap lines to fit within the container.
  • pre-line: Useful for preserving line breaks without keeping multiple spaces, commonly used in text areas or text blocks.

Summary

The white-space property provides significant control over how text content is displayed, especially when dealing with formatting, wrapping, and preserving spaces. Understanding how each value behaves can help create layouts that present text in the desired format, making the content more readable and visually appealing.