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