White space issue for the Pre element

Question

I am facing a really annoying issue with the HTML pre element. I have no idea why it's creating so much white spaces when I never actually did that. Inside my code editor, everything is properly indented, made sure that the HTML is 100% valid but whenever I test on my browser; the white spaces suddenly appear. To make things more understandable, here's an image of how the pre looks inside my console.

And here's the HTML / CSS code.

HTML

<pre>
    &#60;!DOCTYPE html&#62;
    &#60;html&#62;
    &#60;head&#62;
    &#60;title&#62;My website&#60;title&#62;
    &#60;/head&#62;
    &#60;body&#62;

    &#60;script type="text/javascript"&#62;
         alert("Hello world!");
    &#60;/script&#62;
    &#60;/body&#62;
    &#60;/html&#62;
</pre>

CSS

pre{
    overflow: auto;
    background: #ddd;
    padding-left: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -o-pre-wrap;
    white-space: -ms-pre-wrap;
}

If it helps, I am also using ratchet in order to make it mobile ready. (Please note that removing the white-space did not help). Regards.

Answer 1

Instead of:

white-space: pre-wrap

Use:

white-space: pre-line

DEMO

white-space

The white-space property is used to describe how whitespace inside the element is handled.

pre-wrap

Sequences of whitespace are preserved.

pre-line

Sequences of whitespace are collapsed.