Skip to content
Related Articles

Related Articles

Improve Article

CSS | white-space Property

  • Last Updated : 09 Aug, 2019

The white-space Property in CSS is used to control the text wrapping and white-spacing.there are several types of values in this property to use.

Syntax:

white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;

Property Values:

  • normal: This is the default value of this property. When white-space property of CSS is set to normal every sequence of two or more white-spaces will appear as a single white-space. The content in the element will wrap wherever necessary.
    Syntax:
    white-space : normal; 

    Example :






    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            CSS | white-space Property
        </tile>
        <style>
            div {
                width: 500px;
                height: 500px;
                white-space: normal;
                background-color: limegreen;
                color: white;
                font-size: 80px;
            }
        </style>
    </head>
      
    <body>
        <center>
            <div>
                Geeks For Geeks:
                <br>
                A Computer Science Portal For Geeks.
            </div>
        </center>
    </body>
      
    </html>

    Output :

    White-space property css with normal value

  • nowrap :When white-space property of CSS is set to nowrap every sequence of two or more white-spaces will appear as a single white-space. The content in the element will not be wrapped to a new line unless explicitly specified.
    Syntax:
    white-space : nowrap; 

    Example :




    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            CSS | white-space Property
        </tile>
        <style>
            div {
                width: 300px;
                height: 300px;
                white-space: nowrap;
                background-color: lightgreen;
                color: black;
                font-size: 25px;
            }
        </style>
    </head>
      
    <body>
        <center>
            <div>
                Geeks For Geeks: 
                A Computer Science Portal For Geeks.
            </div>
        </center>
    </body>
      
    </html>

    Output :

    White-space property with nowrap value

  • pre:This value makes the white-space have the same effect as <pre>tag in HTML. The content in the element will wrap only when specified using line breaks.
    Syntax:
    white-space : pre; 

    Example:




    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            CSS | white-space Property
        </tile>
        <style>
            div {
                width: 300px;
                height: 300px;
                white-space: pre;
                background-color: lightgreen;
                color: black;
                font-size: 25px;
            }
        </style>
    </head>
      
    <body>
        <center>
            <div>
                Geeks For Geeks:
                A Computer   science portal    for geeks.
            </div>
        </center>
    </body>
      
    </html>

    Output :

    White-space property with pre value

  • pre-line: When white-space property of CSS is set to pre-line value, every sequence of two or more white-spaces will appear as a single white-space. The content in the element will be wrapped when required and when explicitly specified.
    Syntax:
    white-space : pre-line; 

    Example :




    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            CSS | white-space Property
        </tile>
        <style>
            div {
                width: 300px;
                height: 300px;
                white-space: pre-line;
                background-color: lightgreen;
                color: black;
                font-size: 25px;
            }
        </style>
    </head>
      
    <body>
        <center>
            <div>
                Geeks For Geeks:    A science portal for geeks.
            </div>
        </center>
    </body>
      
    </html>

    Output :

    White-space property pre-line value

  • pre-wrap: When white-space property of CSS is set to pre-line value, every sequence of white-spaces will appear as it is. The content in the element will be wrapped when required and when explicitly specified.
    Syntax:
    white-space : pre-wrap; 

    Example :




    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            CSS | white-space Property
        </tile>
        <style>
            div {
                width: 300px;
                height: 300px;
                white-space: pre-wrap;
                background-color: lightgreen;
                color: black;
                font-size: 25px;
            }
        </style>
    </head>
      
    <body>
        <center>
            <div>
                Geeks For Geeks:    A science portal for geeks.
            </div>
        </center>
    </body>
      
    </html>

    Output :

    White-space pre-wrap value

  • initial: This value sets the white-space property to default value.
    Syntax:
    white-space : initial; 
  • inherit: This value sets the white-space property to the value of the parent element.
    Syntax:
    white-space : inherit; 

Supported Browsers: The browser supported by white-space property are listed below:

  • Chrome: 1.0
  • Edge: 8.0
  • Firefox: 3.5
  • Opera: 9.5
  • Safari: 3.0



My Personal Notes arrow_drop_up
Recommended Articles
Page :