How to Break Line Without using <br> Tag in HTML / CSS?

Last Updated : 24 Jun, 2024

Breaking lines in HTML without <br> tags can be achieved using block-level elements such as <div> or <p> combined with CSS properties like display: block; or display: inline-block; and others. These elements naturally wrap text or content, facilitating clean and structured layout design without manual line breaks.

Below are the approaches to break lines without using <be> tag in HTML/CSS:

Table of Content

Using white-space property in CSS
Using display property

Using white-space property in CSS

In this approach, we are using the white-space property by assigning it to "pre". That will align the content of any div into a separate line means it will successfully add the line breaks.

Example: This example uses white-space to pre to break the line.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        Line break without using br tag
    </title>
</head>

<body style="text-align:center;">

    <h1 style="color:green;">
        GeeksForGeeks
    </h1>

    <div style="white-space: pre">
        GeeksforGeeks
        GeeksforGeeks
    </div>
</body>

</html>

Output:

Using display property

This approach uses display property of CSS. we are assigning block as a value to the targeted div or element so that it can add a line break.

Example: This example uses display property to break the line.

html

<!DOCTYPE html> 
<html> 

<head> 
    <title> 
        Line break using display property 
    </title> 

    <style> 
        p span { 
            display: block; 
        } 
    </style> 
</head> 

<body style = "text-align:center;"> 

    <h1 style = "color:green;" > 
        GeeksForGeeks 
    </h1> 
        
    <p> 
        <span>GeeksforGeeks_1</span> 
        <span>GeeksforGeeks_2</span> 
    </p> 
</body> 

</html>