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

这是因为多余的空间被剥离了。您可以使用简单#content{ background-color: blue; width:100%; height:900px; } #box{ width: 200px; position: relative; top: 20px; left: 14px; display: block; border:2px solid red; background-color: white; padding: 5px; } #forgot{ cursor: pointer; color: blue; } 替换每行中$(document).ready(function () { $("#forgot_form").css({'display':'none'}); $("#forgot").on("click", function () { $("#log_in").css({'display':'none'}); $("#forgot_form").css({'display':'block'}); $("#forgot_form").css({"left":"200px"}).animate({"left":"0px"}, "slow"); }); }); 的所有空格，或者将所有内容换成&nbsp中的所有内容：

... + lines[i].replace(/ /g,'&nbsp') + ...

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

我认为没错。

祝你好运