The white-space Property in CSS

The white-space property in CSS is used to control how whitespace (spaces, tabs, and line breaks) is handled within an element. It affects the text layout and wrapping behavior, making it essential for managing text formatting and layout in web design.

Values of white-space

1. normal

   • Description: Collapses consecutive whitespace characters into a single space and allows text to wrap normally at line breaks or when the container width is reached. This is the default value.
   • Example:

     .normal-spacing {
       white-space: normal; /* Collapses whitespace and allows text to wrap */
     }
     

2. nowrap

   • Description: Collapses consecutive whitespace characters into a single space but prevents text from wrapping. The text will continue on a single line, extending beyond the container if necessary.
   • Example:

     .nowrap-text {
       white-space: nowrap; /* Prevents text from wrapping and collapses whitespace */
     }
     

3. pre

   • Description: Preserves whitespace characters (spaces, tabs, and line breaks) exactly as they are in the HTML source. Text will not wrap, and each line break in the source code will be displayed.
   • Example:

     .preformatted {
       white-space: pre; /* Preserves whitespace and prevents text wrapping */
     }
     

4. pre-wrap

   • Description: Preserves whitespace characters as in the pre value but allows text to wrap when necessary to fit the container width. Line breaks in the source code are also preserved.
   • Example:

     .pre-wrap-text {
       white-space: pre-wrap; /* Preserves whitespace and allows text to wrap */
     }
     

5. pre-line

   • Description: Collapses consecutive whitespace characters into a single space but preserves line breaks in the source code. Text will wrap normally.
   • Example:

     .pre-line-text {
       white-space: pre-line; /* Collapses whitespace but preserves line breaks */
     }
     

Examples

1. Normal Whitespace Handling

   .normal {
     white-space: normal; /* Default whitespace handling, text wraps normally */
   }
   

2. No Wrapping

   .nowrap {
     white-space: nowrap; /* Text does not wrap and whitespace is collapsed */
   }
   

3. Preformatted Text

   .preformatted {
     white-space: pre; /* Preserves whitespace and prevents text wrapping */
   }
   

4. Preformatted with Wrapping

   .pre-wrap {
     white-space: pre-wrap; /* Preserves whitespace and allows text to wrap */
   }
   

5. Preformatted with Line Breaks Collapsed

   .pre-line {
     white-space: pre-line; /* Collapses whitespace but preserves line breaks */
   }
   

Explanation

• normal: Default behavior, where extra spaces are collapsed, and text wraps at the end of the line or container width.
• nowrap: Keeps text on a single line by not allowing wrapping. This can cause horizontal scrolling if the text extends beyond the container.
• pre: Preserves all whitespace and line breaks, treating the text as preformatted, which is useful for displaying code or other content where formatting is important.
• pre-wrap: Preserves whitespace and line breaks but still allows the text to wrap to fit the container width, providing a balance between preserving formatting and maintaining layout.
• pre-line: Collapses multiple spaces into one but maintains line breaks, useful for preserving the structure of text while allowing normal text wrapping.

Use Cases

• Code and Preformatted Text: Use pre or pre-wrap for displaying code snippets or text where exact formatting and whitespace are important.
• No Wrapping for Specific Layouts: Use nowrap for elements like navigation menus or buttons where text should not wrap.
• Handling Long Text: Use pre-wrap or pre-line to manage long text blocks that need to preserve some formatting but fit within a container.