CODEWITHSUNDEEP
html
qadenza
qadenza

Reputation: 9293

new line without <br> tag

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.

Upvotes: 43

Views: 165474

Answers (7)

foysalf652
foysalf652

Reputation: 208

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>

Upvotes: 0

Brett
Brett

Reputation: 1

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" ;)

Upvotes: -3

NIKHIL VALSAN
NIKHIL VALSAN

Reputation: 31

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>

Upvotes: 2

Muddassar Ikhlaq
Muddassar Ikhlaq

Reputation: 31

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>

Upvotes: 1

Loi Nguyen Huynh
Loi Nguyen Huynh

Reputation: 9958

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

Upvotes: 5

szym
szym

Reputation: 5846

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

Upvotes: 71

cadday
cadday

Reputation: 282

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

Upvotes: 9

Related Questions