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 Tutorial CSS stands for Cascading Style Sheets. It is a stylesheet language used to style and enhance website presentation. CSS is one of the three main components of a webpage, along with HTML and JavaScript.HTML adds Structure to a web page.JavaScript adds logic to it and CSS makes it visually appealing or
7 min read
CSS Introduction CSS (Cascading Style Sheets) is a language designed to simplify the process of making web pages presentable.It allows you to apply styles to HTML documents by prescribing colors, fonts, spacing, and positioning.The main advantages are the separation of content (in HTML) and styling (in CSS) and the
4 min read
CSS Syntax CSS is written as a rule set, which consists of a selector and a declaration block. The basic syntax of CSS is as follows:The selector is a targeted HTML element or elements to which we have to apply styling.The Declaration Block or " { } " is a block in which we write our CSS.HTML<html> <h
2 min read
CSS Selectors CSS Selectors are used to target HTML elements on your pages, allowing you to apply styles based on their ID, class, type attributes, and more. There are mainly 5 types of selectors.Basic CSS Selectors: These are used to target elements by tag, .class, or # ID for fundamental styling needs.Combinato
7 min read
CSS Comments CSS comments are used to add notes or explanations to your code, helping you and others understand it better. They start with /* and end with */ and can be used for both single-line and multi-line comments. Note: Comments are ignored by browsers, so they won’t affect how your webpage looks or works.
2 min read
CSS Colors CSS colors are used to set the color of different parts of a webpage, like text, background, and borders. This helps make the page look more attractive and easier to read. You can define colors using names, hex codes, RGB values, and more.You can try different formats of colors here- #content-iframe
5 min read
CSS Borders Borders in CSS are used to create a visible outline around an element. They can be customized in terms ofWidth: The thickness of the border.Style: The appearance of the border (solid, dashed, dotted, etc.).Color: The color of the border.You can try different types of borders here- #custom-iframe{ he
5 min read
CSS Margins CSS margins are used to create space around an element, separating it from neighboring elements and the edges of the webpage. They control the layout by adjusting the distance between elements, providing better organization and readability.Syntax:body { margin: value;}HTML<html> <head>
4 min read
CSS Height and Width Height and Width in CSS are used to set the height and width of boxes. Their values can be set using length, percentage, or auto.Width and HeightThe width and height properties in CSS are used to define the dimensions of an element. The values can be set in various units, such as pixels (px), centim
4 min read
CSS Outline CSS outline is a property used to draw a line around an element's border. It does not affect the layout, unlike borders. It's often used to highlight elements, providing a visual emphasis without altering the dimensions of the element.Syntaxselector{ outline: outline-width outline-type outline-color
4 min read