pdunker pdunker - 1 year ago 121
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>');


Answer Source

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>'
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download