Django/VueJS/PostgreSQL 添加 leading/trailing 空白制表符

Question

我在 Django 中有一个文本字段，我正在使用 Django-admin 进行维护，它需要保留 white-space。因此，在使用 vueJS 和 vue-material.

渲染时，我将其包装在 <pre> </pre> 标记中以执行此操作

白色space似乎在使用此方法时被保留，而在python manage.py shell中手动查看模型的descrip字段时，白色space是确实存储在我的数据库中。

但是，由于某种原因，在我的 HTML 渲染时的开头和结尾都有一个神秘的前导白色-space 选项卡，如下所示：

并出现在 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 时白色 space 不出现？

我正在使用 postgres、vuejs、django v 1.10、python 3.5 和 vue-material if any/all有帮助。

Answer 1

造成这种行为的是 white-space: pre-wrap;。

改为尝试：white-space: normal;

Mozilla documentation

Django/VueJS/PostgreSQL 添加 leading/trailing 空白制表符

Django/VueJS/PostgreSQL adding leading/trailing whitespace tabs

html

css

django

vue.js

vue-material