CSS | white-space Property

Last Updated : 09 Aug, 2019

The white-space Property in CSS is used to control the text wrapping and white-spacing.there are several types of values in this property to use.

Syntax:

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

Property Values:

normal: This is the default value of this property. When 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 :

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

Output :

White-space property css with normal value

nowrap :When 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 :

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | white-space Property
    </tile>
    <style>
        div {
            width: 300px;
            height: 300px;
            white-space: nowrap;
            background-color: lightgreen;
            color: black;
            font-size: 25px;
        }
    </style>
</head>
  
<body>
    <center>
        <div>
            Geeks For Geeks: 
            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:

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

Output :

White-space property with pre value

pre-line: When white-space property of CSS is set to 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 :

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | white-space Property
    </tile>
    <style>
        div {
            width: 300px;
            height: 300px;
            white-space: pre-line;
            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>

Output :

White-space property pre-line value

pre-wrap: When white-space property of CSS is set to 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 :

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | white-space Property
    </tile>
    <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>

Output :

White-space pre-wrap value

initial: This value sets the white-space property to default value.
Syntax:
```
white-space : initial; 
```
inherit: This value sets the white-space property to the value of the parent element.
Syntax:
```
white-space : inherit; 
```

Supported Browsers: The browser supported by white-space property are listed below:

Chrome: 1.0
Edge: 8.0
Firefox: 3.5
Opera: 9.5
Safari: 3.0

My Personal Notes

Related Articles