CSS white-space Property
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
Please Login to comment...