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

Question

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

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

here

但是，出于某种原因，在我的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问题吗？如果是这样的话，为什么在查看python shell中的object.descrip时，不会显示空格？

我使用postgres，vuejs，django v 1.10，python 3.5和vue-material，如果有的话帮助

Answer 1

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

而是尝试：white-space: normal;

Mozilla documentation