html - Django/VueJS/PostgreSQL 添加前导/尾随空白选项卡

Question

我在 Django 中有一个文本字段，我正在使用需要保留空白的 Django-admin 进行维护。结果我将它包装在 <pre> </pre> 中使用 vueJS 进行渲染时执行此操作的标记和 vue-material .

使用此方法以及查看 descrip 时似乎保留了空格在 python manage.py shell 中手动设置我的模型字段空格确实存储在我的数据库中。

但是，出于某种原因，在呈现时我的 HTML 的开头和结尾都有一个神秘的前导空白选项卡，如下所示:

并显示在此处的 HTML 中:

代码片段:

相关的html和css

  <md-layout md-column md-flex-xsmall="100" md-flex-small="55"
     md-flex-medium="70" md-flex-large="80" id="summary_block">
    <md-layout >
      <pre class="md-body">
         [[ product.descrip ]]
      </pre>
    </md-layout>
  </md-layout>

#summary_block > div.md-layout > pre {
  white-space: pre-wrap; 
  word-wrap: break-word;
  font-family: inherit;
}

这会是一个 postgres 吗？问题？如果是这样，为什么在查看 object.descrip 时不显示空格？在 python 壳？

我正在使用 postgres , vuejs , django v 1.10 , python 3.5和 vue-material如果任何/所有这些都有帮助。

Answer 1

导致此行为的是 white-space: pre-wrap;。

改为尝试:white-space: normal;

Mozilla documentation