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

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>