new line without <br> tag

user_3044737 0
Viewed 105708

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.

html
7 Answers

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

enter image description here

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>.

enter image description here

user_97878870

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>
user_91761960

Yes, the right way to add breakpoints is to use white-space:pre in css styling sheet. like this

<div style="white-space: pre"> 
       Enjoy the videos and music you love.
        Create your own business
        or entertainment channel 
    </div>
user_145126990

In this case, you can just use (white-space: pre) as style.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> line break without using <br> tag</title>
</head>
<body>

    <div style="white-space: pre">
        Lorem ipsum dolor sit amet.
        Lorem ipsum dolor sit amet.
        Lorem ipsum dolor sit amet.
        Lorem ipsum dolor sit amet.
        Lorem ipsum dolor sit amet.
        Lorem ipsum dolor sit amet.
        Lorem ipsum dolor sit amet.
        Lorem ipsum dolor sit amet.
        Lorem ipsum dolor sit amet.
        Lorem ipsum dolor sit amet.
        Lorem ipsum dolor sit amet.
        Lorem ipsum dolor sit amet.
        Lorem ipsum dolor sit amet.
    </div>
</body>
</html>

user_174868870

If the only issue is the repetition of typing the < br > code, then I would suggest using the clipboard to copy the < br > code, and then every time you need to type it you can paste it instead. < ctrl > v is much easier than having to use the shift keys for the < and > characters. You don't need a text editor, just < ctrl > c to copy and v to paste.

Just how I would do it; assuming that you don't need the clipboard for another part of your particular process.

"work smarter, not harder" ;)

user_196301420
Related