CSS white-space Property: Controlling Text White Space
The white-space property in CSS controls how whitespace characters (spaces, tabs, and line breaks) inside an element are handled. It’s essential for managing text formatting, especially when dealing with preformatted text, code snippets, or content where whitespace is significant. This guide will provide a detailed overview of the white-space property, including its syntax, values, and practical examples.
What is the white-space Property?
The white-space property specifies how whitespace within an element is processed. It dictates whether whitespace is collapsed, whether lines can wrap, and how line breaks are handled. By adjusting this property, you can control the visual presentation of text content.
Purpose of the white-space Property
The primary purposes of the white-space property include:
- Preserving or collapsing whitespace characters.
- Controlling text wrapping behavior.
- Handling line breaks within an element.
- Displaying preformatted text or code snippets accurately.
Syntax and Values
The syntax for the white-space property is as follows:
selector {
white-space: normal | nowrap | pre | pre-wrap | pre-line | break-spaces | inherit | initial | revert | revert-layer | unset;
}
Here’s a breakdown of the possible values:
| Value | Description |
|---|---|
| `normal` |
This is the default value. Whitespace sequences are collapsed, and lines break as necessary to fit the content area. |
| `nowrap` |
Whitespace sequences are collapsed, but lines do not break unless a `br` element is present. The text will continue on one line. |
| `pre` |
Whitespace sequences are preserved. Lines only break on newline characters in the source or `br` elements. Behaves like the `pre` HTML element. |
| `pre-wrap` |
Whitespace sequences are preserved. Lines break when necessary to fit the content area and on newline characters or `br` elements. |
| `pre-line` |
Whitespace sequences are collapsed, but lines break on newline characters in the source or `br` elements. |
| `break-spaces` |
Whitespace sequences are preserved. Lines break when necessary to fit the content area, on newline characters or `br` elements, and additionally break between words if a sequence of whitespace would otherwise overflow. |
| `inherit` | The property inherits its value from its parent element. |
| `initial` | Sets the property to its default value (`normal`). |
| `revert` |
Reverts the property to the value established by the user-agent stylesheet (browser’s default style). |
| `revert-layer` | Reverts the property to the value established by a previous cascade layer. |
| `unset` |
If the property is inherited, it behaves like `inherit`; otherwise, it behaves like `initial`. |
Examples
Let’s explore how the white-space property affects the rendering of text with practical examples.
Example 1: white-space: normal (Default)
The normal value collapses whitespace and allows text to wrap within its container.
<div style="width: 200px; border: 1px solid black;">
<p style="white-space: normal;">
This is a long sentence with multiple spaces and line breaks. It will wrap
within the container.
</p>
</div>
Output:
This is a long sentence with multiple spaces and line breaks. It will wrap
within the container.
Example 2: white-space: nowrap
The nowrap value collapses whitespace and prevents text from wrapping.
<div style="width: 200px; border: 1px solid black;">
<p style="white-space: nowrap;">
This is a long sentence that will not wrap and may overflow the container.
</p>
</div>
Output:
This is a long sentence that will not wrap and may overflow the container.
Example 3: white-space: pre
The pre value preserves whitespace and line breaks, similar to the HTML <pre> element.
<div style="border: 1px solid black;">
<p style="white-space: pre;">
This is
a preformatted
text.
Spaces and line breaks are preserved.
</p>
</div>
Output:
This is
a preformatted
text.
Spaces and line breaks are preserved.
Example 4: white-space: pre-wrap
The pre-wrap value preserves whitespace and line breaks but also wraps text when necessary.
<div style="width: 200px; border: 1px solid black;">
<p style="white-space: pre-wrap;">
This is
a preformatted
text that wraps within the container. Spaces and line breaks are
preserved.
</p>
</div>
Output:
This is
a preformatted
text that wraps within the container. Spaces and line breaks are
preserved.
Example 5: white-space: pre-line
The pre-line value collapses whitespace but preserves line breaks.
<div style="width: 200px; border: 1px solid black;">
<p style="white-space: pre-line;">
This is
a text
with preserved
line breaks. Spaces are collapsed.
</p>
</div>
Output:
This is
a text
with preserved
line breaks. Spaces are collapsed.
Example 6: white-space: break-spaces
The break-spaces value preserves whitespace and allows breaking between words if a whitespace sequence overflows.
<div style="width: 150px; border: 1px solid black;">
<p style="white-space: break-spaces;">
This is a text with long spaces that will break if necessary.
</p>
</div>
Output:
This is a text with long spaces that will break if necessary.
Use Case Example: Displaying Code Snippets
A common use case for the white-space property is displaying code snippets. Using white-space: pre-wrap allows code to maintain its formatting while wrapping within a container.
<div
style="
width: 400px;
border: 1px solid #ddd;
background-color: #f9f9f9;
padding: 10px;
overflow-x: auto;
"
>
<pre style="white-space: pre-wrap; font-family: monospace;">
function greet(name) {
console.log("Hello, " + name + "!");
}
greet("World");
</pre>
</div>
Output:
function greet(name) {
console.log("Hello, " + name + "!");
}
greet("World");
In this example, the code snippet is displayed with its original formatting, and the overflow-x: auto style ensures that long lines can be scrolled horizontally if necessary.
Browser Support
The white-space property is widely supported across modern browsers.
Conclusion
The white-space property in CSS is a powerful tool for controlling how whitespace is handled in text. By understanding its various values and use cases, you can effectively manage text formatting, display code snippets accurately, and create visually appealing content. Whether you need to preserve whitespace, collapse it, or control line breaks, the white-space property provides the flexibility to achieve your desired text presentation.
