html - que - Django/VueJS/PostgreSQL agregando pestañas de espacios en blanco iniciales/finales

vue js que es

Question

Tengo un campo de texto en Django. Estoy manteniendo el uso de Django-admin que requiere la preservación del espacio en blanco. Como resultado, lo estoy envolviendo en una etiqueta <pre> </pre> para hacer esto al renderizar usando vueJS y vue-material .

Parece que se conserva el espacio en blanco cuando se utiliza este método, y cuando se mira manualmente el campo de python manage.py shell de mi modelo en el python manage.py shell el espacio en blanco se almacena en mi base de datos.

Sin embargo, por alguna razón hay una misteriosa pestaña de espacios en blanco al principio y al final de mi HTML cuando se procesa, que se muestra aquí:

Y aparece en el HTML aquí:

Fragmentos de código:

html y css relevantes

  <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;
}

¿Podría ser esto un problema de postgres ? Si es así, ¿por qué no aparecería el espacio en blanco cuando se mira object.descrip en el shell python?

Estoy usando postgres , vuejs , django v 1.10 , python 3.5 y vue-material si alguno / todo eso ayuda.

Answer 1

Es el white-space: pre-wrap; quien causa este comportamiento

En cambio, intente: white-space: normal;

Documentación de Mozilla