In this manual, the CSS white-space property will be discussed with examples. So, let’s start!
What is CSS white-space Property?
The CSS “white-space” property handles the white spaces inside the element.
Syntax
The syntax of the white-space property is mentioned below. You can assign one value according to your preferences:
So, before we rush into the discussion, let’s learn about the associated values with this property one by one!
white-space: nowrap
The white-space property with the value “nowrap” collapses the white spaces into one line. It eliminates the line breaks in the source and never wraps text. Moreover, the text continues until the occurrence of the <br> tag.
Example
Let’s move to the practical example, in which we will write some paragraphs. These are then applied with the white-space property with its different values and see their results.
HTML
Within the body element of the HTML file:
- Add a div with the class name “container”.
- Then, add <h1> tag and <h2> tag with a class named “heading”.
- After that, a <p> tag is placed to add a paragraph on the web page.
Note: To check out the working of different white-space property values, we have placed white spaces inside the paragraph:
<h1 class="heading">The white-space Property</h1>
<h2 class="heading">white-space: nowrap:</h2>
<p class="a">
We are a team. We work together for a common mission. We are a team.
We work together for a common mission. We are a team.
</p>
</div>
Inside the head tag of HTML, add <style> tag.
CSS
background-color: #a9b6eb;
}
The “background-color” property is utilized to set the body element’s background color.
Style “container” div
height: 200px;
color: rgb(19, 1, 56);
}
Here is the description of the given code:
- “.container” indicates the div class container in which the “.” sign is referred to as the class selector.
- “height” property sets the element’s height to 200px.
- “color” property specifies the font’s color.
Style “heading” class
text-align: center;
}
Next, add some style properties to the headings h1 and h2 that are explained below:
- “.heading” is utilized to access the class of <h1> and <h2> elements.
- “text-align” property with the value set as “center” will center the text.
Style “a” class
white-space: nowrap;
}
- “.a” refers to the class of the paragraph.
- “white-space” property with the value set as “nowrap” will collapse all white spaces.
As we can see in the below-given output screen. The nowrap value has collapsed all the white spaces from the paragraph, and the text is not wrapped at all:
white-space: normal
It is the default value of the white-space property. It collapses the white spaces into a single character and wraps the text to the next line when needed.
Syntax
In CSS, assign the value “normal” to the white-space property:
It can be observed that the white spaces are collapsed, and the text is wrapped. Lines are break as to fill the below space:
white-space: pre
The space sequence is preserved, and lines are broken when the newline character is met or on <br>. More specifically, the “pre” value preserves both line breaks and spaces.
Syntax
To utilize it, assign pre property value to the white-space property as mentioned below:
Output
white-space: pre-line
While using the “pre-line” the white spaces are collapsed, and the lines are broken at newline characters, at <br> tag. Moreover, it also wraps the text,
Syntax
In CSS, the white-space property will be assigned value as mentioned below:
By setting the pre-line value to the white-space property, the result will look like this:
white-space: inherit
The value “inherit” indicates that this property should inherit the value from its parent element.
Syntax
Here is the syntax for specifying the value of the white-space property as inherit:
The above code will result as shown in the below image:
white-space: pre-wrap
The “pre-wrap” value preserves the spaces, tabs, and newline. It also wraps the text.
Syntax
Output
white-space: initial
“initial” indicates that the CSS property is to be set to its default value. This value can be assigned to the white-space property as follows:
Output
Bonus Tip
In CSS, there are some other white-space property values that you can further explore:
- white-space: revert
- white-space: revert-layer
- white-space: white-spaces
- white-space: unset
We have learned the various white-space property values and their usage.
Conclusion
In CSS, the “white-space” property defines how to handle the white spaces within an element. For instance, sometimes a document source code is written in a way that is not for final rendering. It needs some indentation and spaces. To set them accordingly, CSS permits us to use the white-space property having different values. In this article, we have explained the values of white-space property and their behavior with examples.
