CSS white-space Property - GeeksforGeeks

21 Oct, 2021
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| 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
Microsoft Edge 12.0
Firefox 3.5
Internet Explorer 5.5
Opera 9.5
Safari 3.0
bhaskargeeksforgeeks
CSS-Properties
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
Types of CSS (Cascading Style Sheet)
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?