0

这是我的模板文件：

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

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

有什么建议么？

4

1 回答 1

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？

埃里克

于 2012-09-27T21:25:21.967 回答