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:

HTMLCopied!

<div id="box">
  Lorem    Ipsum
  Lorem Ipsum
  Lorem   Ipsum
</div>

CSSCopied!

#box {
  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.

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.

JavaScriptCopied!

const box = document.getElementById('box');

box.innerText = 'JavaScript    tutorial at \n Coding Beauty';

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

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.

HTMLCopied!

<div id="box">
  JavaScript     at     Coding Beauty
  HTML at Coding Beauty
  CSS   at   Coding Beauty
</div>

CSSCopied!

#box {
  white-space: pre;
  background-color: #e0e0e0;
  width: 200px;
}

If pre was pre-wrap in this example:

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:

HTMLCopied!

<div id="box">
  JavaScript     at     Coding Beauty
  HTML at Coding Beauty
  CSS   at   Coding Beauty
</div>

CSSCopied!

#box {
  white-space: pre-line;
  background-color: #e0e0e0;
  width: 300px;
}

At a width of 200px:

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.

Every Crazy Thing JavaScript Does

A captivating guide to the subtle caveats and lesser-known parts of JavaScript.

Ayibatari Ibaba

Ayibatari Ibaba is a software developer with years of experience building websites and apps. He has written extensively on a wide range of programming topics and has created dozens of apps and open-source libraries.