Display line break without using the br tag in HTML

In this tutorial, we are going to learn about how to display the line break without using the br tag in HTML with the help of examples.

Consider, we have a following sentence inside the html element:

<div>Hello Gowtham</div>

To create the line break in the HTML without “br” tag, we can use the CSS ‘white-space’ property with a value ‘pre’, so that it breaks the line at a new line characters.

Here is an example:

<div>
    Hello
    Gowtham
</div>

CSS :

div {
    white-space: pre
}

This above css will make the line break at Hello, Gowtham. so, that it will display the Hello and Gowtham in two separate lines.

If we have a fixed container width for the element, then css ‘white-space: pre’ property will overflow the text in line breaks , for that we should use the ‘white-space-pre-wrap’ to fill text inside the necessary boxes.

CSS :

div {
    white-space: pre-wrap
}