pdunker pdunker - 8 months ago 62
CSS Question

How to insert HTML ASCII art from document?

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.

enter image description here
enter image description here

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>');



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>'