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;
}
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
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 Features in ES13
