How to preserve newlines when showing a text file with jQuery

Question

I want to fetch the content of an text file and I have manage to do that. Everything is working except for one thing - detecting new lines.

My solution to fetch the content in the text file:

$.ajax({
    url: '/nhagyavi/files/textfiles/changelog.txt',
    success: function(data) {
        $('#load-changelog').html('<div style="font-family: Courier New;">' + data + '</div>');
    }
});

The content of the text file:

2012-03-15: Snabbfixar
- Detta är en fin liten rad som berättar vad som är nytt
- En till rad, tillsammans med en <a href="javascript:void(0)">länk</a>

How the result looks like on my page:

2012-03-15: Snabbfixar - Detta är en fin liten rad som berättar vad som är nytt - En till rad, tillsammans med en länk

I don't know how I can use print_r in jQuery so I can't really see how the lines really looks like. Anyone who knows how I can fix my problem?

Answer 1

Add white-space:pre-line; to your container:

#load-changelog {
    white-space: pre-line;
}

Simplified demo: http://jsfiddle.net/tF3Mb/1/

If you also want to show all space characters, use white-space:pre instead of pre-line: http://jsfiddle.net/tF3Mb/