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;
}

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.
const box = document.getElementById('box');
box.innerText = 'JavaScript tutorial at \n Coding Beauty';

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

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;
}

white-space: pre
.If pre
was pre-wrap
in this example:

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;
}

white-space: pre-line
.At a width of 200px
:

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.


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.