Django/VueJS/PostgreSQL添加领先/尾随空白标签

Question

我在Django中有一个文本字段我维持使用需要保留空格的Django-admin。因此，我使用vueJS和vue-material进行渲染时，将它包装在<pre> </pre>标记中。

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

但是，由于某种原因，有一个神秘的领先空白标签都在我的HTML的开始和结束时呈现，如下所示：

，并显示了在HTML浏览：

代码snipp ETS：

有关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