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