html

CSS white-space Property

CSS is a Cascading Style Sheet that provides different properties to HTML elements for styling purposes. There are hundreds of properties, like text-align, border, margin, padding, width, height, and more. While writing a large paragraph in HTML, there can be unwanted space between the text, or sometimes it is required to display text in a specific way. In such a scenario, utilize the CSS “white-space” property for controlling white spaces within the text.

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:

white-space: nowrap|pre-wrap|normal|initial|inherit|pre|pre-line;

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:

<div class="container">

<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

body {

background-color: #a9b6eb;

}

The “background-color” property is utilized to set the body element’s background color.

Style “container” div

.container {

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

.heading {

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

.a {

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:

white-space: normal;

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:

white-space: pre;

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:

white-space: pre-line;

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:

white-space: 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

white-space: pre-wrap;

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:

white-space: initial;

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.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.