如何从文档中插入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>');
    }

  });
});

- pdunker

Answer 1

原因是多余的空格将被去除。你可以在每一行中使用简单的 ... + lines[i].replace(/ /g,'&nbsp') + ... 将所有空格替换为 &nbsp，或者将所有内容包装在 <pre>...</pre> 中：

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

- nicael

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

我认为是正确的。

祝你好运。

- user2411670