CSS white-space Property

The CSS white-space property is used to control how text and spaces are displayed within an element. It helps manage text wrapping, spacing, and line breaks for better content layout.

• Controls whether text wraps to the next line or stays on one line.
• Determines how spaces and line breaks are handled.
• Helps keep text formatting consistent in elements like paragraphs or code blocks.

• The white-space: nowrap; property keeps the text on a single line without wrapping.
• The text may overflow the box if it’s too long.
• The paragraph has a black border and a fixed width of 200px.

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. White spaces are collapsed, and text wraps to the next line when necessary

Syntax:

white-space: normal;

• The white-space: normal; property allows the text to wrap automatically to the next line.
• Extra spaces are collapsed into a single space.
• The box has a lime green background with large white text (80px font size).

2. 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. It Collapses white spaces and keeps all text on a single line, preventing line breaks.

Syntax:

white-space: nowrap; 

• The white-space: nowrap; property prevents the text from wrapping to the next line.
• All text stays on a single line, even if it overflows the box.
• The box has a light green background with black text in a 25px font size.

3. 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. It Preserves white spaces and line breaks as they are in the source code without wrapping text.

Syntax:

white-space: pre;

• The white-space: pre; property keeps all spaces and line breaks exactly as they are in the code.
• The text does not wrap to the next line.
• The box has a light green background with black text in a 25px font size.

4. 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. It collapses consecutive spaces into one, preserves line breaks, and wraps text when necessary.

Syntax:

white-space: pre-line;

• The white-space: pre-line; property removes extra spaces but keeps line breaks in the text.
• The text wraps automatically within the 300px-wide box.
• The box has a light green background with black text in a 25px font size.

5. 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. It preserves white spaces and line breaks, and wraps text when necessary.

Syntax:

white-space: pre-wrap;

• The white-space: pre-wrap; property keeps extra spaces and line breaks.
• Text wraps automatically within the 300px-wide box.
• The background is light green, and the text is black with a 25px font size.
• The content is centered on the page for better presentation.

6. 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. It reverts the white-space property to its default value as defined by CSS specifications.

Syntax:

white-space: initial;

• The first <div> uses white-space: initial;, which resets the property to its default browser value.
• The second <div> uses white-space: normal;, which is the default behavior for most elements.
• In both cases, the text wraps to the next line, and extra spaces are collapsed into a single space.
• Visually, both <div> elements display the text in the same way.

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.

Syntax:

white-space: inherit;

• The parent <div> uses white-space: pre-wrap; to keep spaces and line breaks while allowing text to wrap.
• The child <div> uses white-space: inherit;, so it follows the parent’s white-space behavior.
• Both elements preserve spaces and line breaks, and the text wraps inside the container.

Property Values

Here is a brief explanation of each property value for the white-space property:

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.