new line without <br> tag

Question

Writing this html:

lorem ipsum
lorem ipsum
lorem ipsum

browser shows:

lorem ipsumlorem ipsumlorem ipsum

Is there a way to see this:

lorem ipsum
lorem ipsum
lorem ipsum

without using <br> tag at the end of each line, and without using textarea.

I need this because I have a text with 100.000 short lines, and it is time consuming to write <br> tag 100.000 times.

Answer 1

You can use the <pre> tag to keep the line breaks.

<pre>
lorem ipsum
lorem ipsum
lorem ipsum
</pre>

The default style for pre tags is monospaced font, but that can be overriden.

You can achieve the same effect without any extra default formatting using the white-space: pre CSS property.

<div style="white-space: pre">
lorem ipsum
lorem ipsum
lorem ipsum
</div>

There are several other values for white-space, but you should refer to the documentation to choose the most fitting one.

Note that pre will treat every line break the same including the one following the <pre> or <div> tags. If you don't want them you will need to do:

<div style=...>lorem ipsum
lorem ipsum
...

Answer 2

Html: You may wrap them in block elements like <div></div> or <h1></h1>

Css: You may use white-space: pre-wrap;

Js: You may use "replace" to change "\n" to <br/>

Answer 3

I would like to deliver some additional ways to achieve the OP's purpose. Yet, the direct answer for the title "new line without <br> tag" would be <pre> or white-space: pre-wrap; like the above.

But,

If I need 100000 lines of dummy lorem ipsum <br>, I would rather use emmet (which is built-in in VSCode) than write anything myself. ({lorem ipsum <br>}*100)*100

Or, in case these 100000 short lines are predefined text, I can search and replace (Ctrl + H) with regex turned on, replace the regex $ (endline) with <br>.

Answer 4

To fix, add CSS style white-space: pre-wrap:

div {
   white-space: pre-wrap;
}


<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>