如何从文档中插入 HTML ASCII 艺术作品？

【问题标题】：How to insert HTML ASCII art from document?如何从文档中插入 HTML ASCII 艺术作品？
【发布时间】：2016-06-12 00:52:26
【问题描述】：

目前我正在尝试读取可能包含 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>');
    }

  });
});

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

这是因为多余的空间正在被剥离。要么用简单的... + lines[i].replace(/ /g,'&nbsp') + ... 替换每一行中的所有空格&nbsp，要么用<pre>...</pre> 包装所有内容：

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

【讨论】：

【解决方案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

我认为这是正确的。

祝你好运

【讨论】：