CSS white-space Property

Last Updated : 13 Apr, 2026

The CSS white-space property is used to control how text and spaces are displayed within an element. It helps manage text wrapping, spacing, and line breaks for better content layout.

  • Controls whether text wraps to the next line or stays on one line.
  • Determines how spaces and line breaks are handled.
  • Helps keep text formatting consistent in elements like paragraphs or code blocks.
HTML 
<!DOCTYPE html>
<html>
<head>
<style>
p {
  white-space: nowrap;
  border: 1px solid black;
  width: 200px;
}
</style>
</head>
<body>

<p>
This is a long line of text that will not wrap to the next line because of the white-space: nowrap; property.
</p>

</body>
</html>
  • The white-space: nowrap; property keeps the text on a single line without wrapping.
  • The text may overflow the box if it’s too long.
  • The paragraph has a black border and a fixed width of 200px.

CSS white-space Property Examples

Here are detailed examples, along with code, to help you understand each value better:

1. Setting Value normal

The normal value is the default setting for the white-space property. It collapses consecutive white spaces into a single space and allows text to wrap as needed. White spaces are collapsed, and text wraps to the next line when necessary

Syntax: 

white-space: normal;
HTML 
<!DOCTYPE html>
<html>

<head>
    <title> CSS white-space Property </title>
    <style>
        div {
            width: 300px;
            height: 50px;
            white-space: normal;
            background-color: limegreen;
            color: white;
            font-size: 18px;
        }
    </style>
</head>

<body>
    <div> GeeksforGeeks:
        <br> A Computer Science Portal For Geeks.
    </div>

</body>

</html>
  • The white-space: normal; property allows the text to wrap automatically to the next line.
  • Extra spaces are collapsed into a single space.
  • The box has a lime green background with large white text (80px font size).

2. Setting Value nowrap

The nowrap value prevents text from wrapping to the next line, even when it overflows the container. Consecutive white spaces are still collapsed into a single space. It Collapses white spaces and keeps all text on a single line, preventing line breaks.

Syntax: 

white-space: nowrap;
HTML 
<!DOCTYPE html>
<html>

<head>
    <title> CSS white-space Property </title>
    <style>
        div {
            width: 300px;
            height: 30px;
            white-space: nowrap;
            background-color: lightgreen;
            color: black;
            font-size: 13px;
        }
    </style>
</head>

<body>

    <div>GeeksforGeeks:
        A Computer Science Portal For Geeks.
    </div>

</body>

</html>
  • The white-space: nowrap; property prevents the text from wrapping to the next line.
  • All text stays on a single line, even if it overflows the box.
  • The box has a light green background with black text in a 25px font size.

3. Setting Value pre

The pre value preserves all white spaces and line breaks exactly as they appear in the source code. Text will not wrap and will display exactly as written, emulating the behavior of the <pre> HTML tag. It Preserves white spaces and line breaks as they are in the source code without wrapping text.

Syntax: 

white-space: pre;
HTML 
<!DOCTYPE html>
<html>

<head>
    <title> CSS white-space Property </title>
    <style>
        div {
            width: 300px;
            height: 30px;
            white-space: pre;
            background-color: lightgreen;
            color: black;
            font-size: 12px;
        }
    </style>
</head>

<body>

    <div>
        GeeksforGeeks: A Computer science portal for geeks.
    </div>
</body>

</html>
  • The white-space: pre; property keeps all spaces and line breaks exactly as they are in the code.
  • The text does not wrap to the next line.
  • The box has a light green background with black text in a 25px font size.

4. Setting Value pre-line

The pre-line value collapses multiple spaces into a single space, preserves line breaks, and allows text to wrap within the container as needed. It collapses consecutive spaces into one, preserves line breaks, and wraps text when necessary.

Syntax: 

white-space: pre-line;
HTML 
<!DOCTYPE html>
<html>

<head>
    <title> CSS white-space Property </title>
    <style>
        div {
            width: 300px;
            height: 30px;
            white-space: pre-line;
            background-color: lightgreen;
            color: black;
            font-size: 15px;
        }
    </style>
</head>

<body>

    <div>
        GeeksforGeeks: A science portal for geeks.
    </div>

</body>

</html>
  • The white-space: pre-line; property removes extra spaces but keeps line breaks in the text.
  • The text wraps automatically within the 300px-wide box.
  • The box has a light green background with black text in a 25px font size.

5. Setting Value pre-wrap

The pre-wrap value preserves all white spaces and line breaks, while also allowing text to wrap within the container as needed. It preserves white spaces and line breaks, and wraps text when necessary.

Syntax: 

white-space: pre-wrap;
HTML 
<!DOCTYPE html>
<html>
<head>
    <title> CSS | white-space Property </title>
    <style>
    div {
        width: 300px;
        height: 60px;
        white-space: pre-wrap;
        background-color: lightgreen;
        color: black;
        font-size: 15px;
    }
    </style>
</head>

<body>
   
        <div>
            Geeks For Geeks:    A science portal for geeks.
        </div>
  
</body>
</html>
  • The white-space: pre-wrap; property keeps extra spaces and line breaks.
  • Text wraps automatically within the 300px-wide box.
  • The background is light green, and the text is black with a 25px font size.
  • The content is centered on the page for better presentation.

6. Setting Value initial

The initial value resets the white-space property to its default value, as specified by CSS. It behaves as if the property was not set, typically white-space: normal. It reverts the white-space property to its default value as defined by CSS specifications.

Syntax: 

white-space: initial;
HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>White-Space Property Example</title>
    <style>
        .initial {
            white-space: initial;
            border: 1px solid black;
            width: 300px;
            padding: 10px;
            margin-bottom: 10px;
        }

        .default {
            white-space: normal;
            border: 1px solid blue;
            width: 300px;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="initial">
        This div has the initial white-space value. 
        Text will wrap and white spaces will be collapsed.
    </div>
    <div class="default">
        This div has the normal white-space value. 
        Text will wrap and white spaces will be collapsed.
    </div>
</body>

</html>
  • The first <div> uses white-space: initial;, which resets the property to its default browser value.
  • The second <div> uses white-space: normal;, which is the default behavior for most elements.
  • In both cases, the text wraps to the next line, and extra spaces are collapsed into a single space.
  • Visually, both <div> elements display the text in the same way.

7. Setting Value inherit

The inherit value sets the white-space property to the same value as its parent element. It ensures the child element adopts the white-space behavior of its parent.

Syntax: 

white-space: inherit;
HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>White-Space: inherit Example</title>
    <style>
        .parent {
            white-space: pre-wrap;
            border: 1px solid black;
            width: 300px;
            padding: 10px;
            margin-bottom: 10px;
        }

        .child {
            white-space: inherit;
            border: 1px solid red;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="parent">
        Parent div with pre-wrap white-space value.
        <div class="child">
            Child div inherits the white-space value from parent. 
            This text will preserve white spaces and line breaks,
            while allowing text to wrap within the container.
        </div>
    </div>
</body>

</html>
  • The parent <div> uses white-space: pre-wrap; to keep spaces and line breaks while allowing text to wrap.
  • The child <div> uses white-space: inherit;, so it follows the parent’s white-space behavior.
  • Both elements preserve spaces and line breaks, and the text wraps inside the container.

Property Values

Here is a brief explanation of each property value for the white-space property:

ValueDescription
normalDefault. Sequences of whitespace are collapsed into a single space, and text wraps when necessary.
nowrapCollapses whitespace normal, but the text will never wrap to the next line, continuing on the same line until a <br> tag is encountered.
preWhitespace is preserved, and text will only wrap on line breaks. This mimics the behavior of the <pre> HTML tag.
pre-lineCollapses multiple spaces into a single space, but text will wrap when necessary, respecting newlines in the source code.
pre-wrapWhitespace is preserved, and text will wrap when necessary.
break-spacesPreserves whitespace, wraps text, and allows spaces to wrap to the next line. This is similar to pre-wrap, but with additional support for wrapping spaces.
initialSets the property to its default value (normal).
inheritInherits the white-space value from the parent element.

Note: The white-space property is universally supported across modern browsers, ensuring consistent behavior in handling text and spacing across different platforms. No additional browser-specific workarounds are needed.

Comment
Article Tags:
Web Technologies
CSS
CSS-Properties

Explore