Skip to content
Related Articles

Related Articles

Which property is used to control the flow and formatting of text ?

View Discussion
Improve Article
Save Article
  • Last Updated : 01 Jun, 2022

In this article, we will discuss the property that is used to control the flow and formatting of text.

The white-space property in CSS is used to control the text wrapping and white-spacing ie., this property can be used to set about the handling of the white-space inside the elements. There are several types of values in this property to use.

Syntax:

white-space: normal| nowrap| pre |initial;

Property Values: All the properties are described well in the example below.

normal: By default, the property value is normal. When the 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: This example illustrates the use of the white-space property whose property value is set to normal.

HTML




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

Output:

 

nowrap: When the 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: This example illustrates the use of the white-space property whose property value is set to nowrap.

HTML




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

Output:

 

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

Syntax:

white-space: pre;

Example: This example illustrates the use of the white-space property whose property value is set to pre.

HTML




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

Output:

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!