The white-space property in CSS is used to control text wrapping and white-space handling within elements. It allows developers to specify how whitespace inside an element is managed, impacting the layout and readability of the content. Several values can be used with this property to achieve different effects.
Syntax
white-space: normal | nowrap | pre | pre-line | pre-wrap | break-spaces | initial | inherit;
Property Values:
Here is a brief explanation of each property value for the white-space property:
| Value | Description |
|---|
| normal | Default. Sequences of whitespace are collapsed into a single space, and text wraps when necessary. |
| nowrap | Collapses whitespace normal, but the text will never wrap to the next line, continuing on the same line until a <br> tag is encountered. |
| pre | Whitespace is preserved, and text will only wrap on line breaks. This mimics the behavior of the <pre> HTML tag. |
| pre-line | Collapses multiple spaces into a single space, but text will wrap when necessary, respecting newlines in the source code. |
| pre-wrap | Whitespace is preserved, and text will wrap when necessary. |
| break-spaces | Preserves whitespace, wraps text, and allows spaces to wrap to the next line. This is similar to pre-wrap, but with additional support for wrapping spaces. |
| initial | Sets the property to its default value (normal). |
| inherit | Inherits the white-space value from the parent element. |
CSS white-space Property Examples
Here are detailed examples, along with code, to help you understand each value better:
1. Setting Value normal
The normal value is the default setting for the white-space property. It collapses consecutive white spaces into a single space and allows text to wrap as needed.
- Effect: White spaces are collapsed, and text wraps to the next line when 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>
<div> GeeksforGeeks:
<br> A Computer Science Portal For Geeks.
</div>
</body>
</html>
Output:
White-space property CSS with normal value2. Setting Value nowrap
The nowrap value prevents text from wrapping to the next line, even when it overflows the container. Consecutive white spaces are still collapsed into a single space.
- Effect: Collapses white spaces and keeps all text on a single line, preventing line breaks.
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>
<div>GeeksforGeeks:
A Computer Science Portal For Geeks.
</div>
</body>
</html>
Output:
White-space property with nowrap value3. Setting Value pre
The pre value preserves all white spaces and line breaks exactly as they appear in the source code. Text will not wrap and will display exactly as written, emulating the behavior of the <pre> HTML tag.
- Effect: Preserves white spaces and line breaks as they are in the source code without wrapping text.
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>
<div>
GeeksforGeeks: A Computer science portal for geeks.
</div>
</body>
</html>
Output:
White-space property with pre-value4. Setting Value pre-line
The pre-line value collapses multiple spaces into a single space, preserves line breaks, and allows text to wrap within the container as needed.
- Effect: Collapses consecutive spaces into one, preserves line breaks, and wraps text when necessary.
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>
<div>
GeeksforGeeks: A science portal for geeks.
</div>
</body>
</html>
Output:
White-space property pre-line value5. Setting Value pre-wrap
The pre-wrap value preserves all white spaces and line breaks, while also allowing text to wrap within the container as needed.
- Effect: Preserves white spaces and line breaks, and wraps text when necessary.
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 value6. Setting Value initial
The initial value resets the white-space property to its default value, as specified by CSS. It behaves as if the property was not set, typically white-space: normal.
- Effect: Reverts the white-space property to its default value as defined by CSS specifications.
Syntax: white-space: initial;
Example: In this example we demonstrates the white-space property. .initial uses white-space: initial;, while .default uses white-space: normal;, affecting text wrapping and white space handling in each <div>.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>White-Space Property Example</title>
<style>
.initial {
white-space: initial;
border: 1px solid black;
width: 300px;
padding: 10px;
margin-bottom: 10px;
}
.default {
white-space: normal;
border: 1px solid blue;
width: 300px;
padding: 10px;
}
</style>
</head>
<body>
<div class="initial">
This div has the initial white-space value.
Text will wrap and white spaces will be collapsed.
</div>
<div class="default">
This div has the normal white-space value.
Text will wrap and white spaces will be collapsed.
</div>
</body>
</html>
Output:
7. Setting Value inherit
The inherit value sets the white-space property to the same value as its parent element. It ensures the child element adopts the white-space behavior of its parent.
- Effect: Inherits the white-space property value from the parent element.
Syntax: white-space: inherit;
Example: In this example we shows the white-space: inherit; property. The child <div> inherits white-space: pre-wrap; from its parent, preserving white spaces and line breaks within its boundaries.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>White-Space: inherit Example</title>
<style>
.parent {
white-space: pre-wrap;
border: 1px solid black;
width: 300px;
padding: 10px;
margin-bottom: 10px;
}
.child {
white-space: inherit;
border: 1px solid red;
padding: 10px;
}
</style>
</head>
<body>
<div class="parent">
Parent div with pre-wrap white-space value.
<div class="child">
Child div inherits the white-space value from parent.
This text will preserve white spaces and line breaks,
while allowing text to wrap within the container.
</div>
</div>
</body>
</html>
Output:
Supported Browsers
The browser supported by the white-space property are listed below:
Note: The white-space property is universally supported across modern browsers, ensuring consistent behavior in handling text and spacing across different platforms. No additional browser-specific workarounds are needed.
Similar Reads
CSS text-decoration-style Property
The CSS text-decoration-style property sets the style of text decoration, such as solid, double, dotted, dashed, or wavy lines. It works with text-decoration-line and text-decoration-color to customize text appearance, enhancing visual presentation and user experience on web pages.Syntaxtext-decorat
6 min read
CSS counter-increment Property
The CSS counter-increment Property is used to increment/decrement value of a counter. A CSS counter is a variable that is used to track how many times a variable is used. Syntax: counter-increment: none | identifier | initial | inherit;Default Value: none Property values:none: This is the default va
4 min read
CSS outline-color Property
The outline-color property of CSS sets the outline color of an element. Syntaxoutline-color: <color> | invert | inherit;Property Value<color>: It sets the outline color to any valid CSS color. Example: outline-color: black; HTML<!DOCTYPE html> <html> <head> <title
3 min read
CSS columns Property
The CSS columns property is used to control both the number of columns and the width of those columns in a layout. It’s a shorthand property that allows you to set multiple values at once, such as the number of columns and their width.This makes it easier to create multi-column layouts without manua
7 min read
CSS transition Property
The transition-property CSS property sets which CSS properties will have a transition effect, enabling smooth animations for specified properties when they change, without altering the layout or requiring JavaScript.This property is a combination of four sub-propertiestransition-propertytransition-d
3 min read
CSS perspective Property
CSS perspective property is used to give perspective to 3D objects. Perspective is the representation of 3D objects on a 2D plane to give the appearance depth and distance in relation to each other. When defining the perspective property, the child element gets perspective, not the parent element. S
4 min read
CSS grid-template-columns Property
The grid-template-columns property in CSS defines the number and size of columns in a grid layout. It allows you to set both fixed and flexible column sizes, making grid-based designs more adaptable to various layouts and responsive needs. iframe { width: 100%; height: 60vh; border: none; border-rad
4 min read
CSS border-collapse Property
The border-collapse property in CSS is used to set the borders of the cell present inside the table and tells whether these cells will share a common border or not.Syntax: border-collapse: separate|collapse|initial|inherit;Default Value: Its default value is separate. Property Values: separate: This
3 min read
CSS Left Property
The left property in CSS is used to specify the horizontal position of a positioned element. It does not affect non-positioned elements. Note:If the position property is absolute or fixed, the left property specifies the distance between the element's left edge and the left edge of its containing bl
4 min read
CSS border-width Property
The border-width property in CSS sets the width of an element’s border. You can specify a single width for all four sides or define different widths for each side (top, right, bottom, and left). This property is crucial for creating visually appealing borders and enhancing the layout of your web pag
5 min read