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