35

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
  • 134,457
  • 30
  • 163
  • 204
qadenza
  • 8,611
  • 18
  • 61
  • 108
  • 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

5 Answers5

62

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,326
  • 25
  • 33
  • 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
  • 669,327
  • 51
  • 454
  • 560
codenvape
  • 184
  • 1
  • 4
4

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
  • 6,150
  • 21
  • 44
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
0

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
  • 28,850
  • 10
  • 94
  • 99
Muddassar Ikhlaq
  • 21
  • 4