CSS white-space Property

The white-space property in CSS is used to control the text wrapping and white-spacing ie., this property can be used to set about the handling of the white-space inside the elements. There are several types of values in this property to use.

Syntax:

white-space: normal| nowrap| pre| pre-line| pre-wrap| break-spaces| initial| inherit;

Property Values: All the properties are described well with the example below.

normal: This is the default value of this property. When the white-space property of CSS is set to normal, every sequence of two or more white spaces will appear as a single white-space. The content in the element will wrap wherever necessary.

Syntax:

white-space: normal;

Example: This example illustrates the use of the white-space property whose property value is set to normal.

HTML

<!DOCTYPE html>
<html>
<head>
    <title> CSS | white-space Property </title>
    <style>
    div {
        width: 500px;
        height: 500px;
        white-space: normal;
        background-color: limegreen;
        color: white;
        font-size: 80px;
    }
    </style>
</head>
 
<body>
    <center>
        <div> GeeksforGeeks:
            <br> A Computer Science Portal For Geeks.
        </div>
    </center>
</body>
</html>

Output:

White-space property CSS with normal value

nowrap: When the white-space property of CSS is set to nowrap every sequence of two or more white-spaces will appear as a single white-space. The content in the element will not be wrapped to a new line unless explicitly specified.

Syntax:

white-space: nowrap;

Example: This example illustrates the use of the white-space property whose property value is set to nowrap.

HTML

<!DOCTYPE html>
<html>
<head>
    <title> CSS | white-space Property </title>
    <style>
    div {
        width: 300px;
        height: 300px;
        white-space: nowrap;
        background-color: lightgreen;
        color: black;
        font-size: 25px;
    }
    </style>
</head>
 
<body>
    <center>
        <div>GeeksforGeeks:
          A Computer Science Portal For Geeks.
        </div>
    </center>
</body>
</html>

Output:

White-space property with nowrap value

pre: This value makes the white-space have the same effect as <pre>tag in HTML. The content in the element will wrap only when specified using line breaks.

Syntax:

white-space: pre;

Example: This example illustrates the use of the white-space property whose property value is set to pre.

HTML

<!DOCTYPE html>
<html>
<head>
    <title> CSS | white-space Property </title>
    <style>
    div {
        width: 300px;
        height: 300px;
        white-space: pre;
        background-color: lightgreen;
        color: black;
        font-size: 25px;
    }
    </style>
</head>
 
<body>
    <center>
        <div>
          GeeksforGeeks: A Computer science portal for geeks.
        </div>
    </center>
</body>
</html>

Output:

White-space property with pre-value

pre-line: When the white-space property of CSS is set to a pre-line value, every sequence of two or more white-spaces will appear as a single white-space. The content in the element will be wrapped when required and when explicitly specified.

Syntax:

white-space: pre-line;

Example: This example illustrates the use of the white-space property whose property value is set to pre-line.

HTML

<!DOCTYPE html>
<html>
<head>
    <title> CSS | white-space Property </title>
    <style>
    div {
        width: 300px;
        height: 300px;
        white-space: pre-line;
        background-color: lightgreen;
        color: black;
        font-size: 25px;
    }
    </style>
</head>
 
<body>
    <center>
        <div>
            GeeksforGeeks:    A science portal for geeks.
        </div>
    </center>
</body>
</html>

Output:

White-space property pre-line value

pre-wrap: When the white-space property of CSS is set to a pre-line value, every sequence of white-spaces will appear as it is. The content in the element will be wrapped when required and when explicitly specified.

Syntax:

white-space: pre-wrap;

Example: This example illustrates the use of the white-space property whose property value is set to pre-wrap.

HTML

<!DOCTYPE html>
<html>
<head>
    <title> CSS | white-space Property </title>
    <style>
    div {
        width: 300px;
        height: 300px;
        white-space: pre-wrap;
        background-color: lightgreen;
        color: black;
        font-size: 25px;
    }
    </style>
</head>
 
<body>
    <center>
        <div>
            Geeks For Geeks:    A science portal for geeks.
        </div>
    </center>
</body>
</html>