0

In html, if you use a new line character to create blank lines, Chrome will ignore them when it renders the page, although if you look at the actual html rendered, they are still in the source. If I recall, years ago, browsers didn't always do this. Some actually rendered the new line as more spacing. I can't test this in all the various browsers whether this is still the case. Does anyone know if all modern browsers ignore the new lines?

Johann
  • 27,536
  • 39
  • 165
  • 279

3 Answers3

1

Line returns in the HTML document are ignored. Text and elements will wrap continuously until they encounter a <p> or <br> tag within the flow of the document text. Line breaks are displayed, however, when text is tagged as preformatted text (<pre>).

Looks that way from here, couldn't tell you why though!

Eddie Reeder
  • 805
  • 1
  • 7
  • 13
1

By Default Browsers doesn't show carriage returns in the rendered page. If you have an element with carriage return and want to preserve them so the rendered page also show them you have to add the following style to your element:

style="white-space: pre-line"

Example:

<div style="white-space: pre-line">
Hello How are you 
this text will be shown with carriage returns
You see it
</div>

If you want also to preserve the "tabs" => \t, you should use: style="white-space: pre-wrap"

<div style="white-space: pre-wrap">
Hello How are you
        this text will also shown spaces before when rendered
nice
</div>

Fiddle Example: https://jsfiddle.net/osLwn7zb/

ElLocoCocoLoco
  • 387
  • 3
  • 11
0

It's safe to assume that the DOM-tree is rendered independently from whitespace / indentation etc. (at least with a modern browser).

So I'd say you're home-safe!

Anders
  • 660
  • 3
  • 12
  • Other than making the markup easier to read, can you think of any other reason why anyone would use the new line character? – Johann Oct 08 '20 at 08:46
  • 1
    From this [answer](https://stackoverflow.com/questions/588356/why-does-the-browser-renders-a-newline-as-space), it looks like there are cases where whitespace will change how the DOM is rendered. Ex: `white-space: pre` CSS rule. – Eddie Reeder Oct 08 '20 at 08:52
  • @EddieReeder I was too fast "on the keys", my bad... you're absolutely right. – Anders Dec 18 '20 at 18:48