css - 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/