white-space

Overview

The white-space property controls how white spaces, line breaks, and tabs are processed and rendered within an element's content. It can be used to control text wrapping, preserve formatting, and manage white space behavior.

Examples and Usage

To showcase each value of the white-space property, we'll use separate <div> elements with a noticeable border, and inside them, we'll include paragraphs with the appropriate length for the purpose.

<div class="normal">
  <p> 
    CSS (Cascading Style Sheets) is a stylesheet language used for describing the look and formatting of a document written in HTML or XML (including XML dialects such as SVG or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.
  </p>
</div>

<div class="nowrap">
  <p> 
    CSS (Cascading Style Sheets) is a stylesheet language used for describing the look and formatting of a document written in HTML or XML (including XML dialects such as SVG or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.
  </p>
</div>

<div class="pre">
  <p>
          CSS (Cascading Style Sheets) is a stylesheet language used for describing the  look and formatting of a document written in HTML or XML (including XML    dialects such as SVG or XHTML). 

CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.
  </p>
</div>

<div class="pre-wrap">
  <p> 
     CSS (Cascading Style Sheets) is a stylesheet language used for describing the look and formatting of a document written in HTML or XML (including XML dialects such as SVG or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.
  </p>
</div>

<div class="pre-line">
  <p> 
      CSS (Cascading Style Sheets) is a stylesheet language used for describing the look and formatting of a document written in HTML or XML (including XML dialects such as SVG or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, 
or on other media.
  </p>
</div>

<div class="break-spaces">
  <p> 
    CSS (Cascading Style Sheets) is a stylesheet language used for describing the look and formatting of a document written in HTML or XML (including XML dialects such as SVG or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.
  </p>
</div>

div {
  border: 1px solid red;
  width: 400px;
  margin-bottom: 1em;
}

.normal p {
  white-space: normal; /* Default behavior: collapses white space and breaks lines */
}

.nowrap p {
  white-space: nowrap; /* Collapses white space, but suppresses line breaks (text wrapping) */
}

.pre p {
  white-space: pre; /* Preserves white space; breaks lines only at newline characters and <br> elements */
}

.pre-wrap p {
  white-space: pre-wrap; /* Preserves white space; breaks lines at newline characters, <br> elements, and to fit line boxes */
}

.pre-line p {
  white-space: pre-line; /* Collapses white space; breaks lines at newline characters, <br> elements, and to fit line boxes */
}

.break-spaces p {
  white-space: break-spaces; /* Similar to pre-wrap, but provides a line breaking opportunity after every preserved white space character */
}

Note the behavior of break-spaces, which is similar to pre-wrap but collapses sequences of preserved white spaces that wrap to a new line. It's important to choose the appropriate value based on your specific design requirements.

Values

The white-space property accepts the following values:

Associated Properties

• overflow-wrap
• word-break
• hyphens

Tips and Tricks

• Use the white-space to control how text is wrapped and spaced within an element, but keep in mind that it doesn't affect the size or layout of the element itself.

• When using white-space: nowrap, be cautious of potential layout issues, as it can cause content to overflow its container if not managed properly.

• Utilize the overflow-wrap, word-break, and hyphens properties to fine-tune word breaking and hyphenation within an element.

Browser Compatibility

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers (see more in the Useful Resources below)

Useful Resources

Can I use - White Space Property (for browser compatibility)

CSS Text Module Level 3 Specification

W3C CSS Working Group Drafts - White Space Property