Question

这是我的模板文件：

{% 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 %}

和 base.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

我想改变的是第一个显示在左上角的" { "，而不是它本身 - 有点向下，有点在右边。

有什么建议吗？

Answer 1

为什么使用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？

埃里克

如何从左上角写入document.write？

1 个答案: