How to insert HTML ASCII art from document?

Question

At the moment i'm trying to read .txt files which could contain ASCII arts and display them in my HTML document with JQuery. Simple text is displayed right but i have formatting problems with the arts.

How can i fix this ?

$(document).ready(function(e) {

    $.get('/test/posts/header.txt', function(data) {

    var lines = data.split('\n');

    for (var i = 0, len = lines.length; i < len; i++) {

    $(".stream").append('<div class="line"><p class="header">' + lines[i] + '</p></div>');
    }

  });
});

Answer 1

This is because the excess spaces are getting stripped. Either you replace all the spaces with &nbsp in every line with simple ... + lines[i].replace(/ /g,'&nbsp') + ... , or you wrap everything in <pre>...</pre> :

'<div class="line"><p class="header"><pre>' + lines[i] + '</pre></p></div>'

Answer 2

HTML

<pre id="asciiart"></pre>

I see you are using jquery:

$("#asciiart" ).load( "/test/posts/header.txt" );

You can also use css

.line{
    white-space: nowrap;
}

or in your case

<div class="line"><p class="header"></div></div>

.line>.header

I think that's right.

Good Luck