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

Tari Ibaba
Last updated on March 28, 2023
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:

<div id="box">
  Lorem    Ipsum
  Lorem Ipsum
  Lorem   Ipsum
</div>
#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.

Every Crazy Thing JavaScript Does

Every Crazy Thing JavaScript Does
Avoid painful bugs and save valuable time with Every Crazy Thing JavaScript Does, a captivating guide to the subtle caveats and lesser-known parts of JavaScript.

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.

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.

<div id="box">
  JavaScript     at     Coding Beauty
  HTML at Coding Beauty
  CSS   at   Coding Beauty
</div>
#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:

<div id="box">
  JavaScript     at     Coding Beauty
  HTML at Coding Beauty
  CSS   at   Coding Beauty
</div>
#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.

See also