white-space

The white-space property indicates to the browser how to handle spaces in text.

        
          
          <nav>  <ul>    <li><a href="/about">About the team</a></li>    <li><a href="/projects">Our projects</a></li>    <li><a href="/contact-us">Contact us</a></li>    <li><a href="/help">Help</a></li>  </ul></nav>
          <nav>
  <ul>
    <li><a href="/about">About the team</a></li>
    <li><a href="/projects">Our projects</a></li>
    <li><a href="/contact-us">Contact us</a></li>
    <li><a href="/help">Help</a></li>
  </ul>
</nav>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

        
          
          a {  white-space: nowrap;}
          a {
  white-space: nowrap;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Keywords:

        
          
          .element {  white-space: normal;  white-space: nowrap;  white-space: pre;  white-space: pre-wrap;  white-space: pre-line;  white-space: break-spaces;}
          .element {
  white-space: normal;
  white-space: nowrap;
  white-space: pre;
  white-space: pre-wrap;
  white-space: pre-line;
  white-space: break-spaces;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

If there is a lot of text in an element (more than can fit the width of the element), the browser by default attempts to wrap words to a new line. Wrapping generally occurs at space characters or line break characters. The discussion now is about formatting text directly within HTML. Indeed, we can leave a long paragraph in HTML as a single line, or we can break it into several lines using the Enter key. By default, the browser ignores formatting in HTML. It relies only on tags and outputs text on the screen based on the current way of handling whitespace characters. But we can change this method by using various values of the white-space property.

If there are multiple consecutive spaces in a line, the browser collapses them into one space. I came from the forest = I came from the forest. All line breaks in HTML within a tag are also replaced by spaces:

        
          
          <p>  Once,    <!-- Line break -->  in a cold    <!-- Line break -->  winter    <!-- Line break -->  time</p><p>I     came     from    the forest;</p>
          <p>
  Once,    <!-- Line break -->
  in a cold    <!-- Line break -->
  winter    <!-- Line break -->
  time
</p>
<p>I     came     from    the forest;</p>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

As a result, the text on the page wraps at spaces, taking into account the boundaries of the element.

Consecutive spaces and line breaks are handled the same way as normal, but the browser stops considering the boundaries of the element and displays all text in one line.

All formatting from HTML is preserved, including line breaks and sequences of spaces. The boundaries of the element are ignored, and the text may overflow them.

All formatting from HTML is preserved, including line breaks and sequences of spaces. Unlike pre, text is wrapped automatically when the boundary of the element is reached.

Consecutive spaces are collapsed, but other formatting from HTML is preserved; text wraps at line breaks in HTML. Text wraps automatically when boundaries of the element are reached.

The behavior is similar to pre-wrap, except for one distinction. We remember that with the value pre-wrap, words are wrapped considering the boundaries of the element, but if there are multiple spaces after the last word at the boundary, they are preserved on the same line. In the case of break-spaces, these spaces behave more complexly. Some of them remain on the same line, filling the width of the element to the maximum allowed, while the other part of the spaces is moved to a new line.

        
          
          <p>Once,    in    a cold winter     time    I came from the forest;        it was a strong frost.</p>
          <p>Once,    in    a cold winter     time
    I came from the forest;        it was a strong frost.</p>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

💡 To force text wrapping regardless of formatting, you can use the <br> tag. Text behavior when using this tag is the same for any values of the white-space property. Even with the value nowrap, text will wrap at the point where <br> is used.

        
          
          🛠 Quite often, the value `white-space: pre` is used when laying out source code:<iframe title="Code block with line breaks" src="../demos/code/" height="280"></iframe>
          🛠 Quite often, the value `white-space: pre` is used when laying out source code:

<iframe title="Code block with line breaks" src="../demos/code/" height="280"></iframe>

        
        
          
            
            Copy
            Copied
            Failed to copy