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 >
|
Output:

White-space pre-wrap value
initial: This value sets the white-space property to the 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 the white-space property are listed below:
- Google Chrome 1.0 and above
- Microsoft Edge 12.0 and above
- Firefox 1 and above
- Internet Explorer 5.5 and above
- Opera 4 and above
- Safari 1 and above