如何使文档.write从左上角写入

这是我的模板文件：

{% extends '::base.html.twig' %}
{% block title %}Quote Metadata{% endblock %}
{% block css_js %}
    <link href="{{ asset('bundles/acmequotes/css/bootstrap.css') }}" type="text/css" rel="stylesheet" /> 
{% endblock %}
{% block body %}
    <div class="metadata"> 
    <script>
        var obj = {{ data|raw }};
        document.write(JSON.stringify(obj, null, 4));
    </script>
    </div>
{% endblock %}

和基地.html.twig：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block css_js %}{% endblock %}
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
    </head>
    <body>
        {% block body %}{% endblock %}
    </body>
</html>

这是我的 css 中：

.metadata {
        white-space: pre-wrap; 
}

当我从浏览器看到我的页面代码时，这是我得到的 html：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Quote Metadata</title>
            <link href="/my-quotes/web/bundles/acmequotes/css/bootstrap.css" type="text/css" rel="stylesheet" /> 
        <link rel="icon" type="image/x-icon" href="/my-quotes/web/favicon.ico" />
    </head>
    <body>
    <div class="metadata"> 
    <script>
        var obj = {"hello":"world", "Test":["hello"]};
        document.write(JSON.stringify(obj, null, 4));   
    </script>
    </div>
</body>
</html>

这是输出：http://s18.postimage.org/ebcuii3i1/hello.jpg

我想更改的是第一个显示在左上角的" { "，而不是原样 - 有点向下，有点右。

有什么建议吗？

你为什么要使用 document.write？您将在标签和缩进中引入额外的空格字符。

<div id="output" class="metadata"></div>
<script>
    var obj = {"hello":"world", "Test":["hello"]};
    document.getElementById("output").innerHTML = JSON.stringify(obj, null, 4);   
</script>

还有为什么不使用pre？

埃里克

相关内容

最新更新

热门标签：