38

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.

RobG
  • 142,382
  • 31
  • 172
  • 209
qadenza
  • 9,025
  • 18
  • 73
  • 126
  • 3
    You could always just paste it into any text editor and replace line breaks with
    – MrGarretto Mar 24 '16 at 00:27
  • 6
    Add [`white-space:pre-wrap`](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space) to your CSS. – Blazemonger Mar 24 '16 at 00:29
  • You could use a text editor like Sublime Text that allows you to type `
    ` on each of the 100k lines at the same time. Would just be a matter of: `CTRL+A`, `CTRL+SHIFT+L`, `END`, `
    `.     – Marty Mar 24 '16 at 00:35

7 Answers7

66

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
...
szym
  • 5,606
  • 28
  • 34
  • 3
    `pre` may have other undesirable effects on the formatting. – Blazemonger Mar 24 '16 at 00:31
  • 1
    @Blazemonger - so might pre-wrap. pre-line is probably closest to what the OP is asking for, but the choice might determined by other factors not in the question. – Alohci Mar 24 '16 at 00:36
  • it works, but a margin or padding at the top appears. css `margin:0` and `padding:0` doesn't help – qadenza Mar 24 '16 at 00:42
  • 1
    It's not margin nor padding, but an extra line of content. I added a comment. – szym Mar 24 '16 at 00:48
8

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

Barmar
  • 741,623
  • 53
  • 500
  • 612
codenvape
  • 252
  • 2
  • 5
  • 2
    `
    ` and `

    ` won't do what he wants, it needs to be `
    `.

     – Barmar Mar 24 '16 at 00:38
  • Just to clarify -- wrapping each line in `
    ` does put them on separate lines because it's a block-level tag. It just "won't do what he wants" in the sense that OP didn't want to put `
    ` on every line, and `
    ` is even longer than that.     – tdy Feb 08 '23 at 22:23
5

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

Loi Nguyen Huynh
  • 8,492
  • 2
  • 29
  • 52
2

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>
NIKHIL VALSAN
  • 31
  • 3
1

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>
Suraj Rao
  • 29,388
  • 11
  • 94
  • 103
Muddassar Ikhlaq
  • 31
  • 5
0

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>
foysalf652
  • 208
  • 1
  • 10
-3

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

Brett
  • 1
  • 1