How to Display a Line Break Without the br Tag in HTML

To create a line break in HTML without the <br> tag, set the white-space property of the text container to pre-wrap. For example:

HTML
<div id="box"> Lorem Ipsum Lorem Ipsum Lorem Ipsum </div>
CSS
#box { white-space: pre-wrap; }
Line break created with white-space: pre-wrap
Line break created with white-space: pre-wrap.

Setting line-space to pre preserves line breaks and sequences of whitespace in the element’s text. So the 4 spaces between the words in the first line are shown in the output along with the line break.

Note that the space used for text indentation is also shown in the output, adding extra left padding to the container.

Subscribe to Coding Beauty Newsletter

Gain useful insights and advance your web development knowledge with weekly tips and tutorials from Coding Beauty. Over 3,000 developers subscribe.

white-space: pre-wrap with JavaScript

When white-space is set to pre-wrap, you can also display a line break by including the \n character in a string assigned to the innerHTML or innerText property.

JavaScript
const box = document.getElementById('box'); box.innerText = 'JavaScript tutorial at \n Coding Beauty';
Displaying line breaks with white-space: pre-wrap and JavaScript.
Displaying line breaks with white-space: pre-wrap and JavaScript.

Without white-space: pre-wrap, this would have been the output:

There are no line breaks without white-space: pre-wrap
There are no line breaks without white-space: pre-wrap.

Line break with white-space: pre

We can also use the white-space property to pre to display line breaks without the <br> tag. pre works a lot like pre-wrap, except that the text will no longer automatically wrap it would in pre-wrap or the default normal value.

For example, let’s reduce the width of the #box container to 200px, to observe its overflow behavior with pre.

HTML
<div id="box"> JavaScript at Coding Beauty HTML at Coding Beauty CSS at Coding Beauty </div>
CSS
#box { white-space: pre; background-color: #e0e0e0; width: 200px; }
Line break created with white-space: pre
Line break created with white-space: pre.

If pre was pre-wrap in this example:

Automatic line break created when using white-space: pre
Automatic line break created when using white-space: pre.

The behavior with pre is the same when you set the innerHTML or innerText property of the element to a string using JavaScript.

Line break with white-space: pre-line

In situations where you want extra spaces to be ignored but line breaks to show up in the output, setting white-space to pre-line will come in handy:

Here’s how the would look at a width of 300px and a white-space of pre-line:

HTML
<div id="box"> JavaScript at Coding Beauty HTML at Coding Beauty CSS at Coding Beauty </div>
CSS
#box { white-space: pre-line; background-color: #e0e0e0; width: 300px; }
Line break created with white-space: pre-line.

At a width of 200px:

Automatic line break created when using white-space: pre-line.
Automatic line break created when using white-space: pre-line.

Like the previous two possible white-space values, pre-line works in the same way when you set the innerHTML or innerText property of the element to a string using JavaScript.



11 Amazing New JavaScript Features in ES13

This guide will bring you up to speed with all the latest features added in ECMAScript 13. These powerful new features will modernize your JavaScript with shorter and more expressive code.

11 Amazing New JavaScript Features in ES13

Sign up and receive a free copy immediately.


Leave a Comment

Your email address will not be published. Required fields are marked *