CSS | white-space Property

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 :

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    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 :

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    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 :

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    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 :

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    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

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.