如何讓document.write從左上角寫入？

這是我的模板文件：如何讓document.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 %}

和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

，我想改變的東西是要顯示在左上角，而不是因爲它是第一個" { " - 有點下來，在右邊一點。

有什麼建議嗎？

來源

2012-09-27 Faery

爲什麼使用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-27 21:25:21 epascarello

非常感謝你！現在完美！我不使用pre，因爲有時候我的線條太長，我想要太長時間以至於不能分到下一行。 – Faery

所以添加預包裝代碼。 – epascarello

我把它放在.css文件中 - '.metadata {{0}}白色空間：預包裝; }' – Faery

如何讓document.write從左上角寫入？

回答

相關問題