如何從文檔中插入HTML ASCII藝術？

Question

目前我正在嘗試讀取可能包含ASCII藝術的.txt文件，並使用JQuery在我的HTML文檔中顯示它們。 簡單的文本顯示正確，但我有藝術格式問題。

我怎樣才能解決這個問題 ？

$(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

這是因為多余的空間被剝離了。 或者您更換所有的空格&nbsp用簡單的在每一行... + lines[i].replace(/ /g,'&nbsp') + ... ，或者包裹在一切<pre>...</pre> ：

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

Answer 2

HTML

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

我看到你正在使用jquery：

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

你也可以使用CSS

.line{
    white-space: nowrap;
}

或者在你的情況下

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

.line>.header

我認為這是對的。

祝好運