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 に答える