White Space

White Space is a property defined in CSS (Cascading Style Sheets) that enable the user to control the text wrapping and white spaces inside an element of the website. It can take several types of values depending upon the user's need.

Syntax of White Space Property

The syntax of implementing the white-space property in CSS is similar to any other property that is property_name: value;

Several values that can be passed to the white-space property are:

The above values assigned to the property are keyword values; they are specific to a particular element in the website.

The values mentioned above are global; they are used to maintain consistency among all the website elements.

White-space property is a single value, which means you can use only one value simultaneously.

Functions Performed by Different values in white-space

• normal: This value collapses a sequence of white spaces. The new line character is also considered white space. If the lines are broken, then the line must fill the line boxes.
• nowrap: Using this value, it treats white space between the element as normal, but it suppresses the line breaks or the text wrapping in the source.
• pre: It does not collapse the white spaces they are preserved. The lines are only discontinued by the new line characters and break tags mentioned in the website's source.
• pre-wrap: The sequences of white space are preserved. It is similar to pre as the sequence of white-space are preserved. The lines are either broken on the new line or due to the break tag in the source code. The only difference is that it requires filling the line boxes too.
• pre-line: The value collapses the white spaces in the content. The lines are broken due to the new line characters or the break tag. It is necessary to fill the line boxes.
• break-spaces: The behavior of break spaces is somewhat identical to pre-wrap; the key difference between both the values are as follows:
• Any sequence of preserved white space will occupy space. It also includes the end of a line.
• The line break opportunity is present after each preserved white space character in break-spaces. The line breaks are also possible in between the white space character.
• These preserved spaces occupy spaces, but they do not hang. This may change the size of the box intrinsic.

Implementing white-space property

Normal: It is the default value for the property. It will perform text wrapping whenever necessary. When the normal value is assigned to the white-space property, every sequence with more than two spaces will be replaced by a single white space.

Syntax

Below is an example to illustrate the implementation of white-space property using normal as the value.

Output:

Nowrap: When the white space property is assigned a nowrap value. Every sequence of characters with more than two spaces will be represented as a single space. It won't perform wrapping unless the user specifies it.

Syntax

Below is an example to illustrate the implementation of white-space property using nowrap as the value.

Output:

Pre: This value works to have the same effect on the element as the pre-tag defined in the HTML. The content in the element will wrap the text if the user has explicitly specified that by using the line breaks.

Syntax

Below is an example to illustrate the implementation of white-space property using pre as the value.

Output:

Pre-line: If the user assigns pre-line as the value for the white space property in the CSS. Every sequence of two or more white spaces will be replaced by a single white space in the content present in the element. The user can wrap the content present in the element, but the user will have to explicitly specify to wrap the content.

Syntax

Below is an example to illustrate the implementation of white-space property using pre-line as the value.

Output:

Pre-wrap: If the user assigns pre-line as the value for the white-space property in the CSS document. This means that every sequence of white space will appear as it is in the document. Then, the white spaces will be unaffected. The user can wrap the content in the element, but to do so, the user will have to specify it explicitly.

Syntax

Below is an example to illustrate the implementation of white-space property using pre-wrap as the value.

Output:

Initial: this value can be assigned to the white-space property in the CSS to its default value.

Syntax

Below is an example to illustrate the implementation of white-space property using initial as the value.

Output:

Initial: this value can be assigned to the white-space property in the CSS to its default value.

Syntax

Below is an example to illustrate the implementation of white-space property using initial as the value.

Output:

Browsers Supporting white-space property

With multiple web browsers available in the market. The following browsers support the mentioned white-space property:

• Google Chrome 1.0 and the later versions
• Microsoft Edge 12.0 and above
• Firefox 1 and above
• Internet Explorer 5.5 and above
• Opera 4 and above
• Safari 1 and above
• It is also supported by Android and web application versions of the software.