如何让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从左上角写入？

回答

相关问题